JavaScript Event Processing: una comprensión profunda de this Mecanismo de procesamiento de eventos y mecanismo de procesamiento de eventos

Las aplicaciones web de cliente eficientes no se pueden separar del mecanismo de procesamiento de eventos JavaScript. Los eventos permiten a JavaScript detectar el comportamiento del usuario, como el ratón, haciendo clic en los enlaces, desplazamiento de la página, cambio de tamaño de la ventana, arrastre de objetos, etc. Su código JavaScript puede registrar un controlador de eventos que se desencadena cuando ocurre un evento específico. La mayoría de los navegadores pasarán un solo objeto que contenga información de eventos a la función, como información clave, la posición del cursor del mouse, etc. Puede realizar ciertas acciones, como elementos de animación, iniciar una solicitud AJAX o bloquear el comportamiento predeterminado del navegador. Además, la palabra clave esta también se puede configurar. Típicamente, this apunta al elemento que desencadena el evento, pero no siempre es el caso.

Evite usar manejadores de eventos en línea

]]

en línea Los manejadores de eventos (por ejemplo, haz clic en mí ]) son simples, pero tienen muchas desventajas: son altamente restrictivas, torpes y pueden bloquear el código HTML. Dado que las llamadas y el controlador de eventos se definen en diferentes ubicaciones, es complicado de mantener. Finalmente, dado que los eventos pueden llamarse cuando se carga la página, las etiquetas de script deben colocarse en la parte superior del HTML, no en la parte inferior.

Evento tradicional dom0 ]

Métodos de manejo de eventos tradicionales (por ejemplo,

link.onclick = eventHandler; ) solo se puede asignar un controlador por tipo de evento. Nota: No use link.onclick = eventHandler (); , esto ejecutará inmediatamente la función eventHandler y asignará el valor de retorno (undefined) al nodo onclick del nodo #link . Esto no informará un error, pero su controlador nunca se llamará cuando ocurra el evento de clic.

modern DOM2 Events ]

El procesamiento de eventos modernos permite especificar múltiples manejadores para el mismo evento. Sin embargo, debido a algunas diferencias en la implementación entre Microsoft y W3C, solo IE9 y arriba admite

addEventListener () . Podemos usar la detección de objetos para crear una función adicional del evento de navegador cruzado:

adjectEvent (enlace, "hacer clic", eventHandler); function adjectEvent (elemento, type, manejador) { if (element.adDeventListener) element.adDeventListener (type, manejador, falso); else element.attachevent ("on" tipo, manejador); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

Similar al evento DOM0, todos los navegadores establecen

this como el elemento que desencadena el evento ... excepto IE8 y abajo. En IE8 y abajo, this es siempre un objeto global window . Afortunadamente, podemos determinar el elemento de destino del objeto del evento:

function eventHandler (e) { E = E || Window.event; Var Target = E.Target || E.Sracelement; console.log (objetivo); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

el significado de la palabra clave this en el controlador de eventos JavaScript ]

this La palabra clave se refiere al contexto en el que se llama la función. En un controlador de eventos, this generalmente apunta al elemento HTML que adjunta el controlador de eventos. Esto le permite acceder y manipular elementos directamente.

Cómo usar this en el controlador de eventos

usando

this es simple, al igual que usar otras variables. Recuerde, this apunta al elemento HTML del controlador de eventos adjunto.

tipos de eventos diferentes en javascript

javaScript admite múltiples eventos como

clic , mouseover , mouseout , keydown , [&] keyUp , &&] load y unload . cómo adjuntar un controlador de eventos a un elemento

puede adjuntar un controlador de eventos a un elemento usando el método addEventListener

. Este método acepta dos parámetros: el nombre del evento a escuchar y la función para ejecutarse cuando ocurra el evento.

objeto de evento en javascript

El objeto del evento es un objeto especial creado cuando ocurre un evento. Este objeto contiene información sobre eventos, como el tipo de evento, el elemento de destino, el tiempo de ocurrencia del evento, etc. Puede acceder a los objetos de eventos en las funciones del controlador de eventos.