Explicación detallada de transmisiones de eventos y manejadores de eventos en JavaScript

Flujo de eventos: hay dos tipos. Es decir, es el flujo de burbujas de eventos. Cuando se inicia el evento, se recibe del elemento más específico y se propaga hacia arriba paso a paso a nodos menos específicos (elemento -> documento). En contraste, la transmisión de captura de eventos de Netscape.

Los eventos de nivel DOM2 estipulan que el flujo de eventos incluye tres etapas: la etapa de captura de eventos, la etapa objetivo y la etapa de burbujas de eventos.

La mayoría de las veces es la fase de burbujas de agregar un controlador de eventos al flujo de eventos. Un castaño de Eventutil:

 var eventUtil = {addHandler: function (elemento, type, handler) {if (element.adDeventListener) {element.adDeventListener (type, handler, falso); } else if (element.attachevent) {element.attachevent ('on' + type, manejador); // ie8} else {elemento ['on' + type] = handler; }}, removeHandler: function () {...}}

Echemos un vistazo en detalle a continuación:

Manejador de eventos de nivel DOM0

La forma tradicional de especificar manejadores de eventos a través de JavaScript es asignar una función a un atributo de controlador de eventos.

Cada elemento tiene sus propios atributos de controlador de eventos, que generalmente son en minúsculas, como OnClick. Establecer el valor de esta propiedad en una función puede especificar el controlador de eventos.

 var btn = document.getElementById ('mybtn'); // Agregar controlador de eventos btn.onClick = function () {alerta (this); // es un elemento dom btn}; // eliminar el controlador de eventos btn.onclick = null;

Ventajas: 1. Simple 2. Tiene las ventajas del navegador cruzado

Desventajas: los controladores de eventos no se especifican antes de que se ejecute el código, por lo que estos códigos se encuentran detrás del botón en la página, por lo que es posible que no se reciba ninguna respuesta después de un período de tiempo, y la experiencia del usuario empeora.

Manejador de eventos de nivel DOM2

Se definen dos métodos para manejar las operaciones que especifican y eliminan los controladores de eventos: AddEventListener () y RemoVentListener (). Tres parámetros, 1. El nombre del evento a procesar. 2. Funcionar como controlador de eventos 3. Un valor booleano. El último valor booleano es cierto, lo que significa que el controlador de eventos se llama en la etapa de captura, y falso significa que el controlador de eventos se llama en la etapa de burbuja.

 // Agregar múltiples manejadores de eventos var btn = document.getElementById ('mybtn'); btn.addeventListener ('click', function () {alert (this); // es DOM elemento btn}, falso); btn.addeventListener ('click', function () {alerta ('hello world);}, falso); // btn.removeEventListener ('click', function () {// La función anónima no se puede eliminar, la eliminación fallida}, falso); // Reescribir var handler = function () {alert (this.id); }; btn.addeventListener ('hacer clic', controlador, falso); // Eliminar el controlador de eventos nuevamente btn.removeEventListener ('hacer clic', controlador, falso); // Eliminar correctamente

Estos dos manejadores de eventos se disparan en el orden en que se agregan. En la mayoría de los casos, los controladores de eventos se agregan a la etapa burbujeante de la transmisión del evento, que puede ser la máxima compatibilidad con varias versiones del navegador.

Ventajas: un elemento puede agregar múltiples manejadores de eventos

Desventajas: los navegadores IE8 y debajo no admiten los manejadores de eventos de nivel DOM2. (Incluido IE8)

Es decir, manejador de eventos

Se definen dos métodos, similares a los anteriores: AttachEvent (), DETACHEVENT (). Estos dos métodos reciben los mismos dos parámetros: el nombre del controlador de eventos y la función del controlador de eventos. Dado que las versiones IE8 y anteriores solo admiten burbujas de eventos, los manejadores de eventos agregados a través de DECACHEVENT () se agregarán a la fase de burbujas.

 var btn = document.getElementById ('mybtn'); btn.attachevent ('onClick', function () {alerta (this); // window}); btn.attachevent ('onClick', funciton () {alerta ("hola, mundo");});

Haga clic en el botón, el orden de activación de estos dos controladores de eventos es exactamente lo opuesto a lo anterior. No se activa en el orden en que se agregan los manejadores de eventos, solo todo lo contrario.

Ventajas: un elemento puede agregar múltiples manejadores de eventos

Desventajas: solo apoya, es decir.

Manejador de eventos entre navegadores

p.ej:

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