Explicação detalhada de fluxos de eventos e manipuladores de eventos em JavaScript

Fluxo de eventos: existem dois tipos. Ou seja, é o fluxo de bolhas de eventos. Quando o evento é iniciado, ele é recebido do elemento mais específico e propaga o passo a passo a passo para nós menos específicos (elemento -> documento). Por outro lado, o fluxo de captura de eventos do Netscape.

Os eventos de nível DOM2 estipulam que o fluxo de eventos inclui três estágios: o estágio de captura de eventos, o estágio de destino e o estágio da bolha do evento.

Na maioria das vezes, é a fase de bolhas de adicionar um manipulador de eventos ao fluxo de eventos. Chestnut de um evento:

 var eventUtil = {addHandler: function (elemento, tipo, manipulador) {if (element.addeventListener) {element.addeventListener (tipo, manipulador, false); } else if (element.attachevent) {element.attachevent ('on' + tipo, manipulador); // ie8} else {element ['on' + type] = manipulador; }}, RemowHandler: function () {...}}

Vamos dar uma olhada em detalhes abaixo:

Manipulador de eventos de nível DOM0

A maneira tradicional de especificar manipuladores de eventos através do JavaScript é atribuir uma função a um atributo de manipulador de eventos.

Cada elemento possui seus próprios atributos de manipulador de eventos, que geralmente são minúsculos, como o OnClick. Definir o valor desta propriedade como uma função pode especificar o manipulador de eventos.

 var btn = document.getElementById ('mybtn'); // Adicione o manipulador de eventos btn.onClick = function () {alert (this); // é um elemento dom BTN}; // remove o manipulador de eventos btn.onclick = null;

Vantagens: 1. Simples 2. Tem as vantagens do navegador cruzado

Desvantagens: os manipuladores de eventos não são especificados antes da execução do código; portanto, esses códigos estão localizados atrás do botão na página, portanto, é possível que nenhuma resposta seja recebida após um período de tempo e a experiência do usuário se torne pior.

Manipulador de eventos de nível DOM2

Dois métodos são definidos para lidar com operações que especificam e excluem manipuladores de eventos: addEventListener () e removeventListener (). Três parâmetros, 1. O nome do evento a ser processado. 2. Função como manipulador de eventos 3. Um valor booleano. O último valor booleano é verdadeiro, o que significa que o manipulador de eventos é chamado no estágio de captura, e false significa que o manipulador de eventos é chamado no estágio da bolha.

 // Adicione vários manipuladores de eventos var Btn = document.getElementById ('mybtn'); btn.addeventListener ('click', function () {alert (this); // é o elemento dom btn}, false); btn.addeventListener ('clique', function () {alert (alert (alert); btn.removeEventListener ('click', function () {// A função anônima não pode ser removida, falha na remoção}, false); // reescreva var manipulador = function () {alert (this.id); }; btn.addeventListener ('clique', manipulador, false); // Remova o manipulador de eventos novamente btn.removeEventListener ('clique', manipulador, false); // remova com sucesso

Esses dois manipuladores de eventos são disparados na ordem em que são adicionados. Na maioria dos casos, os manipuladores de eventos são adicionados ao estágio borbulhante do fluxo de eventos, que pode ser a máxima compatibilidade com várias versões do navegador.

Vantagens: um elemento pode adicionar vários manipuladores de eventos

Desvantagens: IE8 e abaixo dos navegadores não suportam manipuladores de eventos de nível DOM2. (Incluindo IE8)

Ou seja, manipulador de eventos

Dois métodos são definidos, semelhante ao acima: Anexevent (), Detachevent (). Esses dois métodos recebem os mesmos dois parâmetros: o nome do manipulador de eventos e a função do manipulador de eventos. Como o IE8 e as versões anteriores suportam apenas bolhas de eventos, os manipuladores de eventos adicionados através do Detachevent () serão adicionados à fase da bolha.

 var btn = document.getElementById ('mybtn'); btn.attachevent ('OnClick', function () {alert (this); // window}); btn.attachevent ('onclick', funciton () {alert ("hello, mundo");});

Clique no botão, a ordem de acionamento desses dois manipuladores de eventos é exatamente o oposto do acima. Não acionado na ordem em que os manipuladores de eventos são adicionados, exatamente o oposto.

Vantagens: um elemento pode adicionar vários manipuladores de eventos

Desvantagens: Somente suporte ou seja.

Manipulador de eventos de navegador cruzado

por exemplo:

 var eventUtil = {addHandler: function (ele, tipo, manipulador) {if (ele.addeventListener) {ele.addeventListener (tipo, manipulador, false); } else if (ele.attachevent) {ele.attachevent ('on' + tipo, manipulador); } else {ele ['on' + type] = handler}}, removendler: function (ele, tipo, manipulador) {if (ele.removeEventListener) {ele.removeEventListener (tipo, manipulador, false); } else if (ele.detachevent) {ele.detachevent ('on' + tipo, manipulador); } else {ele ['on' + type] = null; }}}