Existem três maneiras de lidar com eventos JavaScript: 1. Manipulador de eventos HTML, adicione o manipulador de eventos diretamente no código HTML, a sintaxe é "<element event=event function...>"; objeto especificado Para adicionar processamento de eventos, a sintaxe é "element object.event=function(){...}" 3. Manipuladores de eventos no nível DOM2 também são adicionados a objetos específicos e são usados principalmente para lidar com as operações de especificação e excluindo manipuladores de eventos.
O ambiente operacional deste tutorial: sistema Windows 10, JavaScript versão 1.8.5, computador Dell G3.
3 maneiras de usar manipuladores de eventos Javascript
Quando ocorre um evento, temos que lidar com ele. Existem três métodos principais de manipuladores de eventos Javascript:
1. Manipulador de eventos HTML
Ou seja, adicionamos manipuladores de eventos diretamente no código HTML, como o seguinte código:
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML adicionado manipulação de eventos");Pelo código acima, podemos ver que o processamento de eventos está diretamente aninhado no elemento. Isso tem um problema: o acoplamento entre o código HTML e js é muito forte. Se um dia você quiser alterar o showmsg em js, então não só. você precisa Se você modificá-lo em js, também precisará modificá-lo em html. Podemos aceitar uma ou duas modificações, mas quando seu código atingir o nível de 10.000 linhas, a modificação exigirá muito tempo e dinheiro. , não recomendamos esse método.
2. Manipulador de eventos DOM nível 0
Para adicionar processamento de eventos ao objeto especificado, observe o seguinte trecho de código:
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); ); } btn.onclick=null;//Se você deseja excluir o evento click de btn, basta configurá-lo como null</script>A partir do código acima, podemos ver que, em comparação com os manipuladores de eventos HTML, eventos DOM nível 0, o acoplamento entre o código HTML e o código js foi bastante reduzido. No entanto, os programadores inteligentes ainda não estão satisfeitos e esperam encontrar uma maneira mais simples de lidar com isso. Vejamos a terceira maneira de lidar com isso.
3. Manipulador de eventos de nível DOM2
O DOM2 também adiciona manipuladores de eventos a objetos específicos, mas envolve principalmente dois métodos para lidar com as operações de especificação e remoção de manipuladores de eventos: addEventListener() e removeEventListener(). Todos eles recebem três parâmetros: o nome do evento a ser tratado, a função como manipulador de eventos e um valor booleano (se deve tratar o evento na fase de captura), observe o seguinte trecho de código:
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); são Defina o último valor como falso, ou seja, não será processado no estágio de captura. De modo geral, o processamento de bolhas tem melhor compatibilidade em vários navegadores function showmsg(){ alert("DOM level adicionou manipulador de eventos"); btn.removeEventListener ("click",showmsg,false);//Se quiser deletar este evento, basta passar os mesmos parâmetros</script>Aqui podemos ver que ao adicionar e excluir o processamento de eventos, o último método é mais direto e simples. Porém, Ma Haixiang lembra a todos que ao processar o evento de exclusão, os parâmetros passados devem ser consistentes com os parâmetros anteriores, caso contrário a exclusão será inválida!
Amplie seu conhecimento:
O fluxo de eventos descreve a ordem em que os eventos são recebidos em uma página. Nos primeiros dias do desenvolvimento de navegadores, os dois principais fabricantes de navegadores, IE e Netscape, estavam em desacordo, o que levou a uma situação frustrante. o fluxo de eventos era completamente diferente. É com isso que estamos familiarizados: o evento borbulhante do IE, a captura de eventos do Netscape. Vamos tirar uma foto primeiro e dar uma olhada rápida na estrutura:
1. Evento borbulhando
O borbulhamento de eventos significa que o evento é inicialmente recebido pelo elemento mais específico (o nó com o nível de aninhamento mais profundo no documento) e depois se propaga para cima até o nó menos específico (o documento). Veja a imagem acima para ilustrar, quando a parte do texto é clicada, ela é primeiro recebida pelo elemento no texto, e depois propagada para a janela passo a passo, ou seja, o processo de 6-7-8-9-10 é executado.
2. Captura de eventos
A captura de eventos significa que o evento é recebido primeiro pelo nó menos específico e o nó mais específico recebe o evento por último. Da mesma forma, no modelo acima, quando a parte do texto é clicada, ela é primeiro recebida pela janela e depois propagada passo a passo para o elemento de texto, ou seja, o processo de 1-2-3-4-5 é executado.