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. Membros públicos do objeto de evento
1. Membros públicos do evento em DOM
O objeto de evento contém propriedades e métodos relacionados ao evento específico que o criou. Os tipos de eventos acionados são diferentes e as propriedades e métodos disponíveis são diferentes. No entanto, todos os eventos do DOM têm os seguintes membros públicos.
um. Comparação de CurrentTarget e Target
Dentro do manipulador de eventos, o objeto que sempre é igual ao valor do CurrentTarget, e o destino contém apenas o alvo real do evento.
Por exemplo: há um botão na página, registre o evento de clique no corpo (o nó pai do botão). Quando o botão é clicado, o evento de cliques borbulha para o corpo para processamento.
<Body> <input id = "btn" type = "button" value = "click"/> <cript> document.body.onClick = function (event) {console.log ("clique no evento registrado no corpo"); console.log ("this === event.currentTarget?"+(this === Event.currentTarget)); // true console.log ("currentTarget === document.body?"+(event.currentTarget === document.body)); // true console.log ('event.target === document.getElementById ("btn")?'+(event.target === document.getElementById ("btn")))); // true} </sCript> </body>O resultado em execução é:
b. Através do atributo de tipo, vários eventos podem ser tratados em uma função.
Princípio: diferentes eventos são tratados de maneira diferente, detectando o atributo Event.Type.
Por exemplo: Defina uma função de manipulador para lidar com 3 tipos de eventos: Clique, MouseOver, MouseOut.
<Body> <input id = "btn" type = "button" value = "click"/> <cript> var Handler = function (event) {switch (event.type) {case "click": alert ("clicked"); quebrar; case "mouseOver": event.target.style.backgroundcolor = "rosa"; quebrar; case "mouseout": event.target.style.backgroundColor = ""; }}; var btn = document.getElementById ("btn"); btn.OnClick = Handler; btn.onMouseOver = manipulador; btn.onmouseout = manipulador; </script> </body>Efeito Execute: Clique no botão e a caixa aparece. Quando o mouse passa pelo botão, a cor de fundo do botão fica rosa; Quando o mouse sai do botão, a cor do plano de fundo retorna ao padrão.
c. Comparação de StopPropagation () e StopImediatePropagation ()
O mesmo: StopPropagation () e StopImediatePropagation () podem ser usados para cancelar a captura ou a borbulhagem de eventos.
Diferente: a diferença entre os dois é que, quando um evento possui vários manipuladores de eventos, o StopImediatePropagation () pode impedir que o manipulador de eventos seja chamado posteriormente.
Por exemplo:
<Body> <input id = "btn" type = "button" value = "click"/> <cript> var btn = document.getElementById ("btn"); btn.adDeventListener ("clique", function (event) {console.log ("buttn clique em escuta uma vez"); // event.stopPropagation (); // Efeito de visualização de descomposição // Event.stopImediatePropation (); // Efeito de visualização de descomposição}, false); btn.addeventListener ("clique", function () {console.log ("Botão Clique em ouvido duas vezes");}, false); document.body.OnClick = function (Event) {console.log ("Body Clicked"); } </script> </body>Efeito de corrida:
D, EventPhase
O valor da fase de eventos é 1 na fase de captura, 2 na fase alvo e 3 na fase da bolha.
exemplo:
<Body> <input id = "btn" type = "button" value = "click"/> <cript> var btn = document.getElementById ("btn"); é? "+event.eventPhase);} btn.addeventListener (" clique ", function (event) {console.log (" o método do nível do botão DOM2 adiciona manipulador de eventos, e o valor do EventPhase é "+Event.EventPhase);}, True); manipulador e o valor do evento é "+event.EventPhase);}, false); document.body.addeventListener ("clique", function (event) {console.log ("Body adiciona manipulador de eventos, e o valor do evento é"+event.eventPhase);}, true); document.body.addeventListener ("clique", função (event) {console.log ("corpo. "+Event.EventPhase);}, false); </script>Efeito de corrida:
2. Membros públicos do evento no IE
As propriedades e métodos de eventos no IE variarão de tipo de evento para DOM, mas alguns são membros públicos que todos os objetos possuem, e a maioria desses membros possui propriedades ou métodos correspondentes ao DOM.
O exposto acima é o conhecimento relevante dos membros públicos (atributos e métodos) do evento que o editor apresentou a você (iv) e espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem!