Análise de instância do modelo de evento JavaScript

Este artigo descreve o uso do modelo de evento JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:

1. Modelo de eventos

Bubble: os eventos são passados ​​de nós foliares ao longo do nó ancestral para o nó raiz para cima.

Captura: Do elemento superior da árvore Dom até o elemento mais preciso, oposto ao evento bolha

Modelo de evento padrão DOM: o padrão DOM suporta eventos do tipo bolha e eventos do tipo Capture. Pode-se dizer que é uma combinação dos dois, antes de tudo, da transmissão do tipo Capture e depois do tipo bolha.

2. Objeto de evento

No navegador do IE, o objeto de eventos é uma propriedade da janela. No padrão DOM, o evento deve ser passado para a função de processamento de eventos como um parâmetro exclusivo.

Obtenha um objeto de evento compatível:

 function (event) {// Evento é uma função de processamento passada como um parâmetro do Event Standard = Event? Event? Evento: Window.event; }

No IE, o objeto do evento está contido no Srcement do evento, enquanto no padrão DOM, o objeto está contido na propriedade de destino

Obtenha o elemento apontado por um objeto de evento compatível:

 var no destino = event.srcelement? Event.srcelement: event.target;

A premissa é garantir que o objeto de evento tenha sido obtido corretamente

3. ouvinte de eventos

No IE, o ouvinte registrado é executado em ordem inversa, ou seja, o ouvinte registrado é executado primeiro.

 element.attachevent ('OnClick', Observer); // Registre elemento do ouvinte.Detachevent ('OnClick', Observer) // Remova o ouvinte

O primeiro parâmetro é o nome do evento, e o segundo é a função de processamento de retorno de chamada

Sob Dom Standard:

 Element.AddeventListener ('Click', Observer, Usecapture) element.removeEventListener ('Click', Observer, USECAPTURA)

O primeiro parâmetro é o nome do evento, sem o prefixo de "on", o segundo parâmetro é a função de processamento de retorno de chamada e o terceiro parâmetro indica se a função de retorno de chamada é chamada no estágio de captura ou no estágio da bolha. O true padrão é o estágio de captura

4. Entrega de eventos

Cancelar a entrega de eventos no navegador compatível

 function somehandler (event) {event = event || Window.Event; if (event.stopPropagation) // dom standard Event.stopPropagation (); else event.cancelbubble = true; // standard}

Cancelar o processamento padrão após a entrega do evento

 function somehandler (event) {event = event || Window.Event; if (event.preventDefault) // Evento padrão dom. prevenvDefault (); else event.returnValue = true; // standard}

Espero que este artigo seja útil para a programação JavaScript de todos.