Si usa la escritura menos, haga más marco como jQuery, inevitablemente será tentado por JS nativo.
Xiaocai en realidad no quiere escribir este blog, parece ser muy rudimentario, pero al ver que ni siquiera puede explicar la vinculación y el desmantelamiento de los eventos de JS nativos en Internet, decidió hacer una ciencia popular.
En primer lugar, Xiaocai no sabe mucho, solo comparte mis ideas contigo.
Modelo de eventos DOM0
Los modelos de eventos evolucionan constantemente, y los primeros modelos de eventos se denominan nivel DOM0.
Modelo de eventos DOM0, compatible con todos los navegadores.
Registrar el nombre del evento directamente en el objeto DOM es el método de escritura DOM0, como:
La copia del código es la siguiente:
document.getElementById ("test"). onClick = function (e) {};
Significa registrar un evento de OnClick. Por supuesto, tiene el mismo significado que este escrito:
La copia del código es la siguiente:
document.getElementById ("test") ["onMouseMove"] = function (e) {};
Esto no es nada, son solo dos formas de acceder a las propiedades del objeto JS. La forma de [] es principalmente para resolver el problema de que el nombre del atributo no es un identificador legal. Por ejemplo, el objeto.123 debe informar un error, pero el objeto ["123"] evita este problema. Al mismo tiempo, la escritura de [] también escribe JS Alive, utilizando cadenas para representar el nombre del atributo, que puede vincular dinámicamente eventos en tiempo de ejecución.
De vuelta al punto, cuando se activa el evento, se aprobará un parámetro E de forma predeterminada para representar el objeto del evento. A través de E, podemos obtener mucha información útil, como las coordenadas del clic, el elemento DOM que activó específicamente el evento, etc.
Según los eventos DOM0, para el mismo nodo DOM, solo uno puede registrarse, y el mismo evento registrado más tarde anulará los anteriores registrados. Por ejemplo:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
btn.onmouseMove = function (e) {
alerta ("OK");
};
btn ["onmousemove"] = function (e) {
alerta ("OK1");
};
El resultado emitirá OK1.
Hablemos de esto a continuación. Cuando se activa un evento, esto se refiere a qué objeto DOM se activa el evento. Por ejemplo:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
btn.onmouseMove = function (e) {
alerta (this.id);
};
La prueba de salida del resultado. Debido a que el evento está registrado en el nodo DOM con la prueba de ID, cuando el evento se activa, esto, por supuesto, representa este nodo DOM. Se puede entender que el evento es llamado por este nodo DOM.
Por lo tanto, es bastante simple cancelar el evento. Solo necesita registrar el evento nuevamente y establecer el valor en NULL, por ejemplo:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
btn.onclick = function (e) {
alerta ("OK");
};
btn.Onclick = null;
El principio es que el último evento registrado debe sobrescribir el anterior. Establezca el último evento registrado en NULL, que desabrochará el evento.
El asunto aún no ha terminado, y el modelo de evento DOM0 también involucra eventos escritos directamente en el HTML. Por ejemplo:
La copia del código es la siguiente:
<div id = "test" onClick = "ejecut ();" > </div>
Los eventos registrados de esta manera también siguen el principio de cobertura, y solo uno puede registrarse y el último entrará en vigencia.
La diferencia es que el evento registrado de esta manera es equivalente a llamar dinámicamente una función (algo de evaluación), por lo que el objeto del evento no se pasará. Al mismo tiempo, esto apunta a la ventana, y ya no es el objeto DOM que desencadena el evento.
Modelo de eventos DOM2
En comparación con DOM0, Shouca solo entiende los siguientes dos puntos:
・ DOM2 admite el registro de múltiples mismos eventos con el mismo elemento DOM.
・ DOM2 ha agregado el concepto de captura y burbujeo.
Los eventos DOM2 son administrados por AddEventListener y RemoLEventListener, por supuesto, este es el estándar.
Sin embargo, IE8 y los siguientes navegadores han creado correspondientes adjuntos y separados. Como Xiaocai es un poco involuntario, este artículo no lo discutirá.
AddEventListener es, por supuesto, el evento de registro. Tiene tres parámetros, a saber: "Nombre del evento", "devolución de llamada de eventos" y "Captura/burbuja". Por ejemplo:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
btn.addeventListener ("hacer clic", función (e) {
alerta ("OK");
}, FALSO);
No hace falta decir que el nombre del evento no es demasiado. En comparación con DOM0, el ON anterior se elimina.
Las devoluciones de llamada para eventos también son fáciles de entender. ¡Debe notificarle si el evento se activa! Al volver a llamar, como DOM0, se pasará un parámetro de evento de forma predeterminada. Al mismo tiempo, esto se refiere al nodo DOM que desencadena el evento.
El último parámetro es el tipo booleano, verdadero representa el evento de captura y False representa el evento de burbujas. En realidad, es fácil de entender. Primero hagamos un diagrama:
Significa que si un elemento desencadena un evento, lo primero que se notifica es la ventana, y luego el documento, y va en secuencia hasta que el elemento (elemento objetivo) que realmente desencadena el evento. Este proceso es captura. A continuación, el evento burbujee desde el elemento de destino y luego saldrá en secuencia hasta el objeto de la ventana. Este proceso es burbuja.
¿Por qué diseñar de esta manera? Esto parece deberse a sus profundos orígenes históricos, por lo que Xiaocai no sabe mucho al respecto, por lo que no hablará sin sentido.
De esto podemos ver que el evento de captura se activa antes del evento de burbujas.
Supongamos que existe una estructura HTML:
La copia del código es la siguiente:
<div id = "prueba">
<div id = "testinner"> </div>
</div>
Luego registramos dos eventos de clic en el Div Exterior, a saber, el evento de captura y el evento burbujeante, el código es el siguiente:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
// atrapar eventos
btn.addeventListener ("hacer clic", función (e) {
alerta ("OK1");
}, verdadero);
// evento burbujeante
btn.addeventListener ("hacer clic", función (e) {
alerta ("OK");
}, FALSO);
Finalmente, haga clic en el Div interno, primero emergente OK1, luego aparezca OK. Combinado con el diagrama esquemático anterior, el DIV externo es equivalente al cuerpo en la figura, y el DIV interno es equivalente al DIV inferior en la figura, lo que demuestra que el evento de captura se ejecuta primero, y luego el evento de burbujas se ejecuta.
¿Por qué enfatizar hacer clic en el Div interno? Porque el elemento DOM que realmente desencadena el evento debe ser de la capa interna, y el elemento DOM de la capa externa tiene la oportunidad de simular y capturar eventos y eventos de burbujas, que se pueden ver en el diagrama esquemático.
¿Qué pasa si registra el evento de captura y el evento burbujeante en el elemento DOM que realmente desencadena el evento?
La estructura HTML es la misma que la anterior, y el código JS es el siguiente:
La copia del código es la siguiente:
var btninner = document.getElementById ("testInner");
// evento burbujeante
btninner.addeventListener ("hacer clic", función (e) {
alerta ("OK");
}, FALSO);
// atrapar eventos
btninner.addeventListener ("hacer clic", función (e) {
alerta ("OK1");
}, verdadero);
Por supuesto, haga clic en el DIV interno, y el resultado es que está bien, primero aparece, luego OK1. En teoría, el evento de captura debe activarse primero, es decir, OK1 aparece primero, pero aquí es especial, porque registramos un evento en el elemento DOM que realmente desencadena el evento, que es equivalente a registrarse en el DIV en la figura. De la figura, podemos ver que el elemento DOM que realmente desencadena el evento es el punto final del evento de captura y el punto de partida del evento de burbujas, por lo que no hay distinción entre los eventos aquí. Cuál se registra primero, se ejecuta cuál primero. En este ejemplo, el evento de burbujas se registra primero, por lo que se ejecuta primero.
Este principio se aplica a múltiples eventos del mismo tipo. Por ejemplo, si se registran 3 eventos de burbujas a la vez, la orden de ejecución estará en el orden de registro, primero registrar y ejecutar primero. Por ejemplo:
La copia del código es la siguiente:
var btninner = document.getElementById ("testInner");
btninner.addeventListener ("hacer clic", función (e) {
alerta ("OK");
}, FALSO);
btninner.addeventListener ("hacer clic", función (e) {
alerta ("OK1");
}, FALSO);
btninner.addeventListener ("hacer clic", función (e) {
alerta ("OK2");
}, FALSO);
El resultado es, por supuesto, OK, OK1 y OK2 Pop-Ups a su vez.
Para comprender mejor el modelo de eventos, hay otro escenario. Si el DIV externo y el Div Inner registran el evento de captura al mismo tiempo, al hacer clic en el Div Inner, el evento del DIV externo debe activarse primero. El código es el siguiente:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
var btninner = document.getElementById ("testInner");
btninner.addeventListener ("hacer clic", función (e) {
alerta ("OK");
}, verdadero);
btn.addeventListener ("hacer clic", función (e) {
alerta ("OK1");
}, verdadero);
El resultado es que OK1 aparece primero.
Si tanto el DIV externo como el Div Inner son eventos de burbujas registrados, al hacer clic en el Div Inner, el evento del Div Inner debe ejecutarse primero, y el principio es el mismo.
Los lectores cuidadosos encontrarán que para el caso de la anidación de div, si hace clic en el Div interno, el Div Exterior también activará un evento, ¡lo que parece ser un problema!
El clic es claramente el DIV interno, pero el evento DIV externo también se desencadena, lo cual es un problema.
De hecho, cuando se activa el evento, un objeto de evento se pasará de forma predeterminada. Como se mencionó anteriormente, hay un método sobre este objeto de evento: stopPropagation. A través de este método, se pueden prevenir burbujas, de modo que el DIV exterior no reciba el evento. El código es el siguiente:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
var btninner = document.getElementById ("testInner");
btn.addeventListener ("hacer clic", función (e) {
alerta ("OK1");
}, FALSO);
btninner.addeventListener ("hacer clic", función (e) {
// detener burbujas
E.stoppropagation ();
alerta ("OK");
}, FALSO);
Finalmente, tengo que hablar sobre cómo resolver el incidente. Sintaxis no event: btn.removeEventListener ("Nombre del evento", "Event Callback", "Capture/Bubble");
Esto es lo mismo que los parámetros del evento de enlace, como se describe en detalle:
・ El nombre del evento significa cancelar el evento.
・ La devolución de llamada del evento es una función, que debe ser la misma que la función que registra el evento.
・ Tipo de evento, valor booleano, esto debe ser consistente con el tipo cuando el evento está registrado.
En otras palabras, el nombre, la devolución de llamada y el tipo, juntos deciden qué evento cancelar, es indispensable. Por ejemplo:
La copia del código es la siguiente:
var btn = document.getElementById ("prueba");
// almacenar la devolución de llamada en una variable
var fn = function (e) {
alerta ("OK");
};
//Vinculante
btn.addeventListener ("hacer clic", fn, falso);
//Eliminación
btn.removeEventListener ("hacer clic", fn, falso);
Para que se cancele el evento registrado, la función de devolución de llamada debe guardarse, de lo contrario no se puede cancelar.
DOM0 mixto y DOM2
Las cosas ya están muy desordenadas, y este es un uso mixto, lo que hace que la gente viva. . .
No tengas miedo, no es un problema usarlo de manera mixta. El modelo DOM0 y el modelo DOM2 siguen cada uno sus propias reglas y no se afectan entre sí.
En general, no hay nada más si se registra primero y se ejecuta primero.
posdata
En este punto, el evento JS nativo casi ha terminado. Xiaocai solo sabe esto. Los lectores son bienvenidos a agregar otros puntos de conocimiento.
En aplicaciones reales, los expertos reales no registrarán estúpidamente tantos eventos. En términos generales, solo necesita registrar un evento en el elemento DOM más externo, y luego usar el mecanismo de captura y burbujas para encontrar el elemento DOM que realmente desencadena el evento, y finalmente llamar a la devolución de llamada basada en la información proporcionada por el elemento DOM que desencadena el evento.
En otras palabras, los expertos administrarán los eventos ellos mismos sin confiar en los navegadores para administrarlos, lo que puede mejorar la eficiencia y garantizar la compatibilidad. ¿No es esto lo que hace jQuery?
Ok, el tutorial termina aquí, ¡espero que sea útil para los lectores!