Los eventos son un método de implementación de programación asincrónica, esencialmente comunicación entre varios componentes del programa, y el DOM admite una gran cantidad de eventos;
Este artículo utiliza estos puntos para analizar los principios básicos del procesamiento de eventos en detalle: tipo de evento, objetivo de evento, controlador de eventos, objeto de eventos, propagación de eventos
Finalmente, te presentaré el objeto del evento;
1. Tipo de evento: es una cadena en minúscula completa que se usa para indicar qué tipo de evento ocurrió, como 'Mouseover'
Tipos de eventos tradicionales: eventos de formulario, eventos de ventana, eventos del mouse, eventos de teclado, eventos DOM, eventos HTML5, pantalla táctil y eventos de dispositivos móviles, etc.
2. Objetivo de evento: el objeto que desencadena el evento
3. Oyente de eventos: una función que maneja o responde a los eventos. Cuando un objeto desencadena un evento, el navegador llamará automáticamente la función registrada en el objeto;
Registre el controlador de eventos (escuche los eventos):
1. Regístrese como atributos HTML (solo se activará en la fase burbujeante) como <table id = "t" onClick = "ModifyText ();">; y algunos tipos de eventos generalmente se activan directamente en el navegador en lugar de en cualquier elemento de documento específico. Estos manejadores de eventos se colocan en la etiqueta <body>, pero el navegador los registrará en el objeto de la ventana, como <body onload = "alert ('¡Hola mundo!')", Y estos eventos incluyen:
Onafterprint Onfocus Ononline OnResize OnborePrint Onhashchang
Onpagehide OnStorage OnbeforeSload Onload onpageshow onUndo
Onblur OnMessage OnpopState Onunload OneError Onoffline Onredo
El valor del evento como un atributo HTML es una cadena de código JS, que es el cuerpo de la función de procesamiento y no contiene {}. Nota: Intente no registrar eventos en ninguna otra etiqueta HTML, viola el principio de separación del código HTML y JavaScript. Si la función del evento puede hacer clic en el elemento del objeto del evento antes de cargarlo, esto causará un error;
2. Regístrese como un atributo del elemento DOM (solo se activará en la etapa de burbuja). En este momento, el nombre del atributo del controlador de eventos debe prefijarse con 'ON'. Este método es compatible con todos los navegadores. La única desventaja es que solo puede registrar una función de controlador de eventos. Si el atributo OnClick se define dos veces, la última definición sobrescribirá la anterior; Por ejemplo: window.onload = function () {...};
3. En todos los navegadores, excepto IE8 y versiones anteriores, las operaciones de eventos (escucha y activación) de DOM se definen en la interfaz EventTarget. Esta interfaz se implementa para el nodo de elemento, el nodo de documento y el objeto de la ventana. Además, los objetos incorporados del navegador como XMLHTTPRequest, Audionode, AudioContext, etc. también han implementado esta interfaz. Existen tres métodos de esta interfaz, AddEventListener y RemoLEventListener se utilizan para unir y eliminar las funciones del oyente, y DispatchEvent se usa para activar eventos;
El método AddEventListener (tipo, oyente, booleano) se utiliza para registrar el oyente. El tercer parámetro establece el método de propagación de eventos. Por lo general, se usa el valor predeterminado FALSO, lo que significa que la función de escucha se activa solo en la etapa de burbuja (tumbe). Cuando se establece en True, significa que la función de escucha se activa en la etapa de captura (captura); Cualquier oyente múltiple puede registrarse para el mismo evento de tipo en el mismo objeto, y todos los oyentes se activarán en la orden de registro (el navegador registrará el registro de oyentes duplicados);
Si desea pasar parámetros a la función de escucha, puede envolver la función de escucha con funciones anónimas, como Elm.AdDeventListener ('Click', function () {Listen ('Argumento real')}, falso);
Cuando el oyente registrado es una variable de referencia para la función, puede usar RemoVentLestener (tipo, oyente, booleano) para eliminar el oyente en el objetivo del evento. Los eventos de burbujas y los eventos de captura del mismo evento de escucha deben eliminarse por separado, y los dos no interfieren entre sí;
var div = document.getElementById ('div'); var oyente = function (event) { / * haz algo aquí * /}; div.addeventListener ('Haga clic', oyente, falso); div.removeEventListener ('Haga clic', oyente, falso);El método DispatchEvent (evento) desencadena manualmente el evento especificado en el nodo actual, lo que desencadena la ejecución de la función de escucha. Este método devuelve un valor booleano. Mientras una función de escucha llame a Event.PreventDefault (), devuelve falso. De lo contrario es cierto. El parámetro es una instancia de un objeto de evento. El parámetro no puede estar vacío y debe ser un objeto de evento válido, de lo contrario se informará un error.
btn.addeventListener ('hacer clic', oyente, falso);
var e = nuevo evento ('hacer clic');
btn.dispatchevent (e); // El evento de clic se activa inmediatamente en BTN, y se llamará al oyente inmediatamente
El siguiente ejemplo determina si el evento ha sido cancelado en función del valor de retorno del método DispathEvent.
var cancelado =! btn.dispeChEvent (evento);
if (cancelado) {console.log ('evento cancelar'); }
else {console.log ('evento no cancelado'); }}
4. IE8 y las versiones anteriores solo admiten adjunta (type, oyente) y despegar (tipo, oyente). Su uso y addEventListener son diferentes: a. Solo hay dos parámetros; b. El tipo de parámetro debe estar prefijado con 'ON'; do. Permite el registro repetido del mismo evento de escucha y se llamará; d. Existe una desventaja en el uso del método AttachEvent, que es que el valor de esto se convertirá en un objeto de ventana en lugar del elemento que desencadena el evento;
Problemas de orden de llamada: 1). Los manejadores registrados mediante la configuración de las propiedades del objeto o los atributos HTML siempre se llaman primero;
2). Los manejadores registrados con AddEventListener se llaman en su orden de registro;
3). Se pueden llamar a los manejadores registrados con AttachEvent en Legacy, es decir, en cualquier orden.
Problema de valor de retorno:
1). El valor de retorno del controlador de eventos solo es significativo para el controlador registrado a través de atributos. Registrar el valor de retorno del controlador de eventos configurando el atributo de objeto o el atributo HTML a FALSO es decirle al navegador que no realice las operaciones predeterminadas relacionadas con este evento. Cuando el navegador quiere saltar a una nueva página, se activa el evento OnBeforeRload del objeto de la ventana. Si su valor de retorno es una cadena, aparecerá en el cuadro de diálogo de confirmación de consulta;
2) .AdDeventListener () o adjunteVent () Registre el controlador de eventos. Para cancelar la operación predeterminada del navegador, debe llamar al método PreventDefault () o establecer la propiedad returnValue del objeto de evento.
Esto apunta al problema:
1). La función de escucha especificada por el método AddEventListener, el interno este objeto siempre apunta al nodo que desencadena el evento;
2). Esta de la función del controlador de eventos registrada por IE8 y los métodos de AttachmentEvent anteriores apuntan al objeto global;
Todo este objeto escrito de la siguiente manera apunta al nodo del elemento.
elemento.OnClick = print;
element.addeventListener ('hacer clic', imprimir, falso)
element.OnClick = function () {console.log (this.id);}
<elemento onClick = "console.log (this.id)">
Este objeto de la siguiente manera apunta al objeto global.
element.OnClick = function () {dosomething ()};
element.setAttribute ('onClick', 'dosomething ()');
<Element onClick = "dosomething ()">
element.attachevent ('onClick', dosomething) // ie8
Problema de memoria: para el siguiente código, se creará una nueva función anónima en cada bucle, y la memoria se consumirá cada vez más; Dado que no se mantiene en referencia a la función anónima, no se puede llamar removeventListener; Por lo tanto, el segundo oyente de parámetros debe mantenerse como referencia a la función del evento de procesamiento;
para (i = 0; i <els.length; i ++) {els [i] .adDeventListener ("haga clic", function (e) {/*hacer algo*/}, falso}); }Funciones de herramientas de propósito general que son compatibles con el IE más antiguo:
Asegúrese de que esta función de herramienta advent del controlador de eventos apunte al objeto de destino del evento
función addEvent (target, type, func) {if (target.addeventListener) {target.addeventListener (type, func, false); } else {target.attachevent ('on'+type, function (e) {// La función de procesamiento registrada por adjunteVent aquí no está vinculada a una referencia, por lo que es imposible usar desparacado para eliminar el retorno de FunC.call (Target, E);}); }}Handler de eventos generales (debido a IE8 y versiones anteriores, el controlador en la propiedad como el objetivo del evento necesita ventana.
función func (evento) {var event = event || window.event; var Target = Event.Target || Event.srcelement; //...... Código Handler}4. Propagación del evento: es el proceso por el cual el navegador decide qué objeto desencadena su controlador de eventos.
El flujo de eventos especificado en el "evento de nivel DOM2" incluye tres etapas: Event Capture Stage ==> en la etapa de destino ==> Etapa de burbujas de eventos. Lo primero que sucede es la fase de captura del evento (que se propaga desde la capa externa a la capa interna), que brinda una oportunidad para todos los nodos que el evento pasa para interceptar eventos. Luego está el evento de recepción de destino real (se ejecuta en la orden de registro). La última etapa es la etapa burbujeante (burbujeando desde la capa interna hasta la capa externa).
Cuando los elementos de contenedores y los elementos anidados, es decir, cuando los controladores de eventos se llaman en la etapa de captura y en la etapa de burbuja: el evento ejecuta a los controladores de eventos en el orden de la transmisión de eventos DOM, y cuando el evento está en la etapa objetivo, el orden de las llamadas de evento está determinado por el orden de escritura del evento vinculante
Si desea que el evento llegue a un determinado nodo y ya no se propaga, hay dos maneras:
1. Use el método Event.stopPropagation () del objeto de evento para evitar la propagación de la función de escucha actual;
2. Use el método Event.StoPimmediatePropagation () del objeto de evento para evitar la propagación de todas las funciones de escucha del evento actual en su objeto de evento;
Delegación de eventos: dado que los eventos se propagarán hacia arriba al nodo principal en la etapa de burbuja, la función de escucha del nodo infantil se puede definir en el nodo principal, y la función de escucha del nodo principal puede manejar eventos de múltiples elementos infantiles de manera uniforme;
5. Objeto del evento (evento): después de que ocurra el evento, se generará un objeto de evento y se pasará como un parámetro para la función de escucha. El navegador proporciona de forma nativa un objeto de evento, y todos los eventos son instancias de este objeto o heredan el objeto Event.prototype. El objeto de evento en sí es un constructor que puede usarse para generar nuevas instancias.
var ev = new Event ("Mire", {"Bubbles": True, "Cancelable": False});
document.dispatchEvent (eV);
El constructor de eventos acepta dos parámetros. El primer parámetro es una cadena, que indica el nombre del evento; El segundo parámetro es un objeto, que indica la configuración del objeto de evento. Este parámetro puede tener las siguientes dos propiedades.
Burbujas: el valor booleano, opcional, predeterminado es falso, lo que indica si el objeto de evento está burbujeado.
cancelable: el valor booleano, opcional, predeterminado es falso, lo que indica si el evento puede cancelarse.
Propiedades del objeto del evento:
1. Relacionado con la etapa del evento:
Burbujas: propiedad de solo lectura, devuelve un valor booleano, lo que indica si el evento actual burbujea. Se pueden llamar diferentes funciones en función de si el evento burbujea.
EventPhase: Devuelve un valor entero (uno de 0,1,2,3), lo que indica el estado actual del evento
<0, el evento aún no ha ocurrido.
<1, el evento se encuentra actualmente en la etapa de captura, es decir, está en el proceso de propagación del nodo ancestro al nodo objetivo. El proceso es desde el objeto de la ventana al nodo del documento, luego al nodo htmlhtmlelement, hasta el nodo principal del nodo de destino.
<2, el evento alcanza el nodo de destino, es decir, el nodo señalado por el atributo de destino.
<3, el evento está en la etapa de burbuja, es decir, en el proceso de propagación posterior desde el nodo objetivo hasta el nodo del antepasado. Este proceso es desde el nodo principal hasta el objeto de la ventana. Esta etapa solo puede ocurrir si el atributo de burbujas es verdad
2. Relacionado con el comportamiento predeterminado de los eventos:
cancelable: devuelve un valor booleano que indica si el evento puede cancelarse. Si desea cancelar un evento, debe llamar al método PreventDefault en este evento
DefaultPrevented: Devuelve un valor booleano que indica si se ha llamado al método PreventDefault.
3. Relacionado con el nodo objetivo del evento:
CurrentTarget: devuelve el nodo unido a la función de escucha de la ejecución del evento.
Objetivo: Devuelve el nodo que activó el evento. En IE6-II8, el nombre de esta propiedad no es un objetivo, sino un srcelement
4. Relacionado con otra información sobre el objeto del evento:
Tipo: Devuelve una cadena que representa el tipo de evento
Detalle: Devuelve un valor numérico que representa cierta información sobre el evento. El significado específico está relacionado con el tipo de evento. Para los eventos del mouse, significa el número de veces que el botón del mouse se presiona en una determinada posición. Por ejemplo, para los eventos DblClick, el valor del atributo de detalle es siempre 2.
TimeStamp: Devuelve una marca de tiempo de milisegundos, lo que indica el momento en que ocurrió el evento. El cálculo comienza desde rendimiento de rendimiento. Si desea convertir este valor en una marca de tiempo de unix época, debe calcular el evento.
ISTRUSTED: Devuelve un valor booleano que indica si el evento es confiable. No es muy útil, el soporte de diferentes navegadores es diferente.
Métodos de objeto de eventos:
PreventDefault (): cancela el comportamiento predeterminado del navegador para el evento actual. La premisa para este método para entrar en vigencia es que la propiedad cancelable del evento es cierta. Si es falso, llamar a este método no tiene efecto.
stopPropagation (): termine el evento para propagarse más durante la captura, procesamiento objetivo o etapa de burbuja del proceso de propagación. Después de llamar a este método, se llamará al controlador en el nodo que maneja el evento y el evento ya no se enviará a otros nodos. Nota: Este método no puede evitar que se llamen a otros manijas de eventos en el mismo nodo de documento, pero puede evitar que los eventos se envíen a otros nodos.
stopimmediatepropagation (): evita que otras funciones de escucha se llamen en el mismo evento. Mientras una de las funciones de escucha llame al método, las otras funciones de escucha no volverán a ejecutar.
Enlace de referencia:
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
Guía de JavaScript autorizado 6ª edición
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.