Leituras relacionadas:
Javascript Event Learning Resumo (v) Tipo de evento do mouse em JS
//www.vevb.com/article/86259.htm
Javascript Event Learning Resumo (i) Fluxo de eventos
//www.vevb.com/article/86261.htm
Javascript Event Learning Resumo (iv) Membros públicos do evento (propriedades e métodos)
//www.vevb.com/article/86262.htm
Javascript Event Learning Resumo (ii) JS Eventador de eventos
//www.vevb.com/article/86264.htm
Javascript Event Learning Resumo (iii) Objeto de evento JS
1. Manipulador de eventos
Como mencionado anteriormente, os eventos são algumas ações executadas pelo próprio usuário ou navegador, como Click, Load e MouseOver são todos os nomes dos eventos. A função que responde a um determinado evento é chamado de manipulador de eventos (também chamado de manipulador de eventos, manipulador de eventos). O nome do manipulador de eventos começa com "ON", então o manipulador de eventos do evento de clique é OnClick, e o manipulador de eventos do evento de carga é ONLOAD.
Existem três maneiras principais de especificar manipuladores de eventos para eventos.
1. Manipulador de eventos HTML
Primeiro de tudo, essa abordagem está desatualizada. Porque as ações (código JavaScript) e o conteúdo (código HTML) estão fortemente acopladas. Mas ainda pode ser usado ao escrever uma pequena demonstração.
Existem duas maneiras de fazer isso, ambas muito simples:
O primeiro tipo: defina diretamente o manipulador de eventos e as ações incluídas no HTML.
A cópia do código é a seguinte: <input type = "button" value = "Clique em mim!"/>
O segundo tipo: define o manipulador de eventos em HTML, e as ações executadas chamam o script definido em outro lugar.
A cópia de código é a seguinte: <input type = "button" value = "clique em mim!"/> <cript> função showMessage () {alert ("clicou!");} </sCript>
observação:
1) Através da variável de evento, você pode acessar diretamente o próprio evento. Por exemplo, onclick = "alert (event.type)" exibirá o evento de clique.
2) Esse valor é igual ao elemento de destino do evento, onde o elemento de destino é entrada. Por exemplo, onclick = "alert (this.value)" pode obter o valor do valor do elemento de entrada.
2. Manipulador de eventos de nível DOM0
Esse método é simples e transfronteador, mas só pode adicionar um manipulador de eventos a um elemento.
Como esse método adiciona vários manipuladores de eventos aos elementos, o seguinte substituirá o anterior.
Adicionar manipulador de eventos:
<input type = "Button" value = "Clique em mim!" ONCLICK = "SHOSTMESSAGE ()"/> <SCRIPT> FUNCTION ShowMessage () {alert ("Clicou!");} </script>Excluir manipulador de eventos:
A cópia do código é a seguinte: mybtn.onclick = null;
3. Manipulador de eventos de nível DOM2
Os manipuladores de eventos no nível DOM2 podem adicionar vários manipuladores de eventos a um elemento. Ele define dois métodos para adicionar e remover manipuladores de eventos: addEventListener () e removerventListener ().
Ambos os métodos requerem 3 parâmetros: nome do evento, função do manipulador de eventos e valor booleano.
Esse valor booleano é verdadeiro e o evento é processado no estágio de captura, falso, e o evento é processado no estágio da bolha, que padroniza para false.
Adicionar manipulador de eventos: agora adicione dois manipuladores de eventos para o botão, um aparece "Hello" e o outro aparece "mundo".
<input id = "mybtn" type = "button" value = "clique em mim!"/> <cript> var mybtn = document.getElementById ("mybtn"); mybtn.addeventListener ("clique", function () {alert ("hello");}, false); mybtn.addeventListener ("clique", function () {alert ("mundial");}, false); </script>Excluir manipulador de eventos: o manipulador de eventos adicionado através do addEventListener deve ser excluído através do RemofEventListener, e os parâmetros são consistentes.
Nota: A função anônima adicionada através do addEventListener não será excluída. O código a seguir não funcionará!
A cópia do código é a seguinte: mybtn.removeEventListener ("clique", function () {alert ("mundo");}, false);
Parece que o RemoneventListener é consistente com o parâmetro addEventListener acima, mas, de fato, a função anônima no segundo parâmetro é completamente diferente.
Portanto, para excluir o manipulador de eventos, o código pode ser escrito assim:
<input id = "mybtn" type = "button" value = "clique em mim!"/> <cript> var mybtn = document.getElementById ("mybtn"); var manipulador = function () {alert ("hello"); } mybtn.addeventListener ("clique", manipulador, false); mybtn.removeEventListener ("clique", manipulador, false); </script>2. IE Manipulador de eventos
1. Cenários de aplicação práticos
IE8 e abaixo dos navegadores não suportam addEventListener. Se você deseja ser compatível com o IE8 e abaixo dos navegadores no desenvolvimento real. Se você usar eventos de ligação nativos e precisar ser processado compatível, poderá usar o jQuery Bind.
2. IE8 encadernação de eventos
O IE8 e os seguintes navegadores implementam dois métodos semelhantes aos do DOM: ATPLEVENT () e Detachevent ().
Ambos os métodos requerem dois parâmetros: o nome do manipulador de eventos e a função do manipulador de eventos.
observação:
O IE11 suporta apenas addEventListener!
IE9 e IE10 Suportes AnexeEvent e AddEventListener!
TE8 e abaixo apenas suporta o AnextEvent!
Você pode usar o código a seguir para testá -lo em vários navegadores de versão do IE.
<input id = "mybtn" type = "button" value = "clique em mim!"/> <cript> var mybtn = document.getElementById ("mybtn"); var handlerie = function () {alert ("helloie"); } var manipulador = function () {alert ("hellodom"); } mybtn.addeventListener ("clique", manipulador, false); mybtn.attachevent ("OnClick", Handlerie); </sCript>Adicionar manipulador de eventos: agora adicione dois manipuladores de eventos para o botão, um aparece "Hello" e o outro aparece "mundo"
<Cript> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("OnClick", function () {alert ("hello");}); mybtn.attachevent ("OnClick", function () {alert ("mundial");}); </script>NOTA: O efeito de operação aqui vale a pena notar:
"World" aparece primeiro nos navegadores abaixo do IE8 e depois "Olá". A ordem do evento que desencadeia no DOM é oposta.
IE9 e acima dos navegadores primeiro aparecem "Hello" e depois aparecem "mundo". A mesma ordem que o evento desencadeia no DOM.
Pode -se observar que o navegador do IE está gradualmente seguindo o caminho certo. . .
Excluir manipulador de eventos: o manipulador de eventos adicionado através do AnexeEvent deve ser excluído através do método de destacar e os parâmetros são consistentes.
Como o evento DOM, as funções anônimas adicionadas não serão excluídas.
Portanto, para excluir o manipulador de eventos, o código pode ser escrito assim:
<input id = "mybtn" type = "button" value = "clique em mim!"/> <cript> var mybtn = document.getElementById ("mybtn"); var manipulador = function () {alert ("hello"); } mybtn.attachevent ("OnClick", manipulador); mybtn.detachevent ("OnClick", manipulador); </script>Nota : Há outro lugar para prestar atenção no IE Handler: Scope.
Usando o método AnextEvent (), o manipulador de eventos é executado no escopo global, portanto, isso é igual à janela.
O escopo do método no nível DOM2 ou DOM0 está dentro do elemento, e esse valor é o elemento de destino.
O exemplo a seguir aparecerá verdadeiro.
<input id = "mybtn" type = "button" value = "clique em mim!"/> <cript> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("OnClick", function () {alert (this === Window);}); </script>Isso é algo a ter em mente ao escrever código de navegador cruzado.
IE7/8 Detecção:
// Juiz IE7/8 Detecção de compatibilidade var isie = !! window.activexObject; var isie6 = iSie &&! window.xmlhttPrequest; var isie8 = isie && !! document.documentMode; var isie7 = isie &&! isie6 &&! isie8; if (isie8 || isie7) {li.attachevent ("OnClick", function () {_marker.openinfowindow (_iw);})} else {li.addeventListener ("click", function () {_marker.openfowindOw (_iw);O exposto acima é o conhecimento relevante do Javascript Event Learning Resumo (ii) do manipulador de eventos JS que o editor apresentou a você. Espero que seja útil para todos!