Explicação detalhada de vários métodos para JS realizar o monitoramento de eventos de ligação

Índice

2. Adicione atributos de evento diretamente em tags HTML:

4. Use o método on da biblioteca jQuery:

Antes de começarmos, vamos apresentar para que serve o monitoramento de eventos?

A escuta de eventos é um mecanismo para capturar e responder a eventos específicos. No desenvolvimento da Web, um evento refere-se a uma operação interativa realizada por um usuário em uma página da Web, como clique de botão, movimento do mouse, entrada de teclado etc. Com a escuta de eventos, podemos registrar as funções do manipulador de eventos que serão chamadas quando ocorrerem determinados eventos.

As funções de monitoramento de eventos incluem:

Resposta interativa: a resposta em tempo real à entrada do usuário pode ser realizada monitorando a operação interativa do usuário. Por exemplo, quando um usuário clica em um botão, ele pode executar ações correspondentes, como enviar um formulário, carregar dados, exibir/ocultar elementos etc.
Aprimoramento da experiência do usuário: por meio do monitoramento de eventos, a experiência do usuário pode ser aprimorada, tornando as páginas da Web mais interativas e dinâmicas. Por exemplo, alterar o estilo de um elemento quando o mouse estiver sobre ele ou validar a entrada do usuário em uma caixa de entrada em tempo real.
Validação de formulário: ouvindo o evento submit do formulário, você pode verificar se os dados inseridos pelo usuário atendem aos requisitos e fornecer prompts ou mensagens de erro correspondentes.
Interação dinâmica: por meio do monitoramento de eventos, efeitos de interação dinâmica podem ser realizados, como arrastar e soltar elementos, realizar rolagem infinita, realizar conclusão automática, etc.
Navegação de página: ouvindo eventos de clique de hiperlinks ou botões de navegação, saltos e navegação entre páginas podem ser realizados.

Em suma, o monitoramento de eventos é uma parte importante do desenvolvimento da Web, por meio do qual a interatividade e a dinâmica podem ser alcançadas, a experiência do usuário pode ser aprimorada e várias funções e efeitos interativos podem ser realizados.

introduzir:

Quando se trata de vincular ouvintes de eventos, o JavaScript oferece uma variedade de métodos, dependendo de suas necessidades e do ambiente de desenvolvimento. Abaixo está uma explicação detalhada de cada método:

Como usar addEventListener:
addEventListenerO método é o método do elemento DOM, que é usado para adicionar ouvintes de evento. Ele aceita três parâmetros: o tipo de evento, a função do manipulador de eventos e um parâmetro booleano opcional que especifica se o evento é acionado durante a fase de captura ou a fase de borbulhamento. O código de exemplo é o seguinte:
```
const element = document.getElementById('myElement');
element.addEventListener('click', eventHandler);
```
Incluindo atributos de eventos diretamente em tags HTML:
É uma maneira fácil de incluir atributos de eventos diretamente em tags HTML. Você pode usar um prefixo no rótulo onseguido do nome do tipo de evento e do manipulador de eventos. Quando o evento for acionado, a função especificada será chamada. O código de exemplo é o seguinte:
```
<button onclick="eventHandler()">Click me</button>
```
Usando onatributos:
a maioria dos elementos DOM tem alguns atributos de evento específicos, como onclick, onmouseoveretc. Você pode atribuir manipuladores de eventos diretamente a essas propriedades. O código de exemplo é o seguinte:
```
const element = document.getElementById('myElement');
element.onclick = eventHandler;
```
A maneira de usar a biblioteca jQuery on:
Se você usar a biblioteca jQuery em seu projeto, ela fornecerá uma maneira mais concisa de vincular ouvintes de eventos. Você pode usar onmétodos para selecionar elementos e especificar tipos de eventos e manipuladores. O código de exemplo é o seguinte:
```
const element = $('#myElement');
element.on('click', eventHandler);
```

Esses métodos podem implementar o monitoramento de eventos e você pode escolher o método apropriado de acordo com suas necessidades. Deve-se observar que usar addEventListenero método é a maneira mais comum e recomendada, pois pode adicionar vários ouvintes de eventos ao mesmo tempo e é mais flexível.

1. `addEventListener`Como usar:

addEventListeneré um método comum para vincular ouvintes de eventos, que fornece funções mais flexíveis e poderosas. Aqui está addEventListeneruma explicação detalhada do método:

gramática:

element.addEventListener(event, listener, options);

parâmetro:

event: O tipo de evento a ser monitorado, como click, , keydownetc.
listener: A função a ser executada quando o evento é acionado, também conhecida como função de processamento de evento ou função de retorno de chamada.
options(Opcional): Um objeto de configuração, usado para especificar algumas opções para escuta de eventos, como fase de captura ou acionamento da fase de bolhas. As opções comumente usadas são:
- capture: Um valor booleano especificando se o evento é acionado na fase de captura ou na fase de bolhas, o padrão é false(fase de bolhas).
- once: um valor booleano que especifica que o ouvinte de evento é removido automaticamente depois que o evento é acionado apenas uma vez, o padrão é false.
- passive: Um valor booleano especificando que o ouvinte de evento não será chamado preventDefault(), usado para melhorar o desempenho da rolagem, o padrão é false.

Código de amostra:

const element = document.getElementById('myElement');

function eventHandler(event) {
  // 处理事件的代码
}

element.addEventListener('click', eventHandler);

O método pode ser usado addEventListenerpara adicionar ouvintes de eventos no elemento especificado. A função do manipulador de eventos será chamada quando o tipo de evento especificado for acionado no elemento. Você pode chamar o método várias vezes no mesmo elemento addEventListenerpara adicionar vários ouvintes de evento.

addEventListenerAs vantagens do método incluem:

Vários ouvintes de eventos podem ser adicionados ao mesmo tempo sem sobrescrever os ouvintes anteriores.
A fase de monitoramento de eventos (fase de captura ou fase de borbulhamento) pode ser controlada de forma flexível.
Você pode usar as opções de configuração para controlar o comportamento dos ouvintes de eventos, como acionar apenas uma vez, melhorar o desempenho etc.

Deve-se observar que addEventListeneros ouvintes de eventos adicionados usando o método podem ser removeEventListenerremovidos por meio do método. Certifique-se de remover os ouvintes quando eles não forem mais necessários para evitar o uso desnecessário de memória e problemas de desempenho.

2. Adicione atributos de evento diretamente em tags HTML:

Incluir atributos de eventos diretamente em tags HTML é uma maneira fácil de vincular ouvintes de eventos. Ao adicionar atributos de evento a tags HTML, você pode especificar o tipo de evento e a função de processamento do evento. Quando o evento for acionado, a função especificada será chamada. Aqui está uma explicação detalhada de como adicionar atributos de evento diretamente em tags HTML:

gramática:

<element event="function">

Entre eles, elementestá o elemento HTML, eventé o tipo de evento a ser monitorado e functioné a função de processamento de eventos.

Código de amostra:

<button onclick="eventHandler()">Click me</button>

eventHandlerNo exemplo acima, a função será chamada quando o botão for clicado .

As vantagens de adicionar atributos de evento diretamente em tags HTML incluem:

Simples e intuitivo: Ao adicionar atributos de evento em tags HTML, você pode especificar diretamente as funções de manipulação de eventos sem código JavaScript adicional.
Implementação rápida: é adequado para requisitos de interação simples e não requer lógica complexa de processamento de eventos.

No entanto, adicionar atributos de evento diretamente em tags HTML tem algumas limitações e ressalvas:

Apenas um manipulador de eventos pode ser vinculado a um único tipo de evento e vários manipuladores de eventos não podem ser vinculados ao mesmo tempo.
Um manipulador de eventos deve ser uma função acessível globalmente, não uma função local ou anônima.
Atributos de eventos em tags HTML podem interagir com ouvintes de eventos no código JavaScript, potencialmente tornando o código difícil de manter e entender.

Portanto, para requisitos de interação complexos e melhor organização do código, recomenda-se a utilização de addEventListenermétodos ou outras formas mais flexíveis de vinculação de eventos. Adicionar atributos de evento diretamente em tags HTML é adequado para cenários de interação simples e prototipagem rápida.

3. Use `on`atributos:

O uso onde atributos é uma forma de anexar ouvintes de evento a tags HTML. Ao definir onas propriedades, você pode especificar o tipo de evento e a função de manipulação de eventos. Quando o evento for acionado, a função especificada será chamada. Aqui está uma explicação detalhada das propriedades usadas on:

gramática:

<element onevent="function">

Entre eles, elementestá o elemento HTML, eventé o tipo de evento a ser monitorado e functioné a função de processamento de eventos.

Código de amostra:

<button onclick="eventHandler()">Click me</button>

eventHandlerNo exemplo acima, a função será chamada quando o botão for clicado .

As vantagens de usar onatributos incluem:

Simples e intuitivo: ao definir atributos em tags HTML on, você pode especificar diretamente as funções de manipulação de eventos sem código JavaScript adicional.
Implementação rápida: é adequado para requisitos de interação simples e não requer lógica complexa de processamento de eventos.

No entanto, onexistem algumas limitações e ressalvas ao usar propriedades:

Apenas um manipulador de eventos pode ser vinculado a um único tipo de evento e vários manipuladores de eventos não podem ser vinculados ao mesmo tempo.
Um manipulador de eventos deve ser uma função acessível globalmente, não uma função local ou anônima.
onOs atributos substituem os manipuladores de eventos existentes do mesmo tipo no elemento, o que pode levar a um código difícil de manter e entender.

Devido às limitações e considerações acima, para requisitos de interação complexos e melhor organização do código, recomenda-se o uso de addEventListenermétodos ou outras formas mais flexíveis de vinculação de eventos. O uso onde propriedades é adequado para cenários de interação simples e prototipagem rápida.

4. `on`O método de uso da biblioteca jQuery:

O método de usar a biblioteca jQuery on()é uma maneira mais flexível e poderosa de associação de eventos. on()O método pode ser usado para vincular ouvintes de eventos para um ou mais tipos de eventos em um ou mais elementos. Aqui está uma explicação detalhada do método usando a biblioteca jQuery on():

gramática:

$(selector).on(eventType, handler)

Dentre elas, $()está a função seletora do jQuery, selectoré o elemento a ser selecionado, eventTypeé o tipo de evento a ser monitorado e handleré a função de processamento de eventos.

Código de amostra:

$("button").on("click", function() {
  // 事件处理逻辑
});

No exemplo acima, quando o botão for clicado, a função anônima será chamada como um manipulador de eventos.

on()As vantagens do método incluem:

Os manipuladores de eventos de um ou mais tipos de eventos podem ser vinculados a um ou mais elementos.
Os ouvintes de eventos podem ser adicionados e removidos dinamicamente para acomodar elementos gerados dinamicamente ou necessidades que mudam dinamicamente.
Você pode usar a delegação de eventos para reduzir o número de manipuladores de eventos e melhorar o desempenho.
Oferece suporte a namespaces para gerenciar ouvintes de eventos, facilitando a adição e remoção de manipuladores de eventos específicos.

Além do uso básico descrito acima, on()o método possui algumas outras opções avançadas de uso e configuração, como:

Os seletores podem ser usados para filtrar os elementos que acionam o evento e somente os elementos que atendem às condições do seletor acionarão o evento.
Você pode especificar a ordem na qual os eventos são acionados e controlar a ordem de execução dos manipuladores de eventos.
off()Os ouvintes de eventos podem ser removidos usando o método.

Resumindo, o método de uso da biblioteca jQuery on()pode fornecer funções de ligação de eventos mais flexíveis e poderosas, adequadas para vários requisitos de interação complexos e cenários de processamento de eventos.