Este artículo describe el uso de la delegación de eventos JavaScript. Compártelo para su referencia. El análisis específico es el siguiente:
1. Haga clic en cualquier parte de la página para activar el evento
Cree un archivo script1.js.
Copie el código de la siguiente manera: (function () {
eventUtility.addevent (documento, "hacer clic", function (evt) {
alerta ('hola');
});
} ());
Sección de página.
Copie el código de la siguiente manera: <LEAD>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</ablo>
<Body>
<script src = "eventUtility.js"> </script>
<script src = "script1.js"> </script>
</body>
</html>
Resultado de salida: al hacer clic en cualquiera de la página aparecerá.
Sin embargo, a veces queremos hacer clic en un elemento en el documento para activar un evento.
2. Use delegado para activar eventos
Agregue una etiqueta a la página.
Copie el código de la siguiente manera: <LEAD>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</ablo>
<Body>
<div>
<p> <a href = "#"> Haz clic en mí </a> </p>
</div>
<script src = "eventUtility.js"> </script>
<script src = "script1.js"> </script>
</body>
Modificar script1.js a:
Copie el código de la siguiente manera: (function () {
eventUtility.addevent (documento, "hacer clic", function (evt) {
// Obtener el objeto de clic
var Target = eventUtility.getTarget (EVT);
// Obtener el nombre de la etiqueta del objeto de clic
var tagName = target.tagname;
// Si la etiqueta es un
if (tagName === "A") {
alerta ("Haz clic en mí");
// Bloquear el comportamiento predeterminado de los enlaces
eventUtility.PreventDefault (EVT);
}
});
} ());
Resultado de salida: el cuadro aparecerá solo si hace clic en una etiqueta en la página.
Los beneficios anteriores son: no importa cuántos elementos de etiqueta se agregan al documento, todas las etiquetas tienen la capacidad de activarse. Esta es la puesta en marcha del evento. Queremos registrar eventos para elementos infantiles, pero primero registramos eventos con el elemento principal del elemento infantil. De esta manera, cualquier elemento que se agregue dinámicamente y del mismo tipo que el elemento infantil se registrará dentro del elemento principal.
Si registramos eventos a elementos infantiles y agregamos dinámicamente elementos del mismo tipo que los elementos infantiles en el documento, debemos registrar eventos para estos elementos infantiles que acaban de agregar dinámicamente.
Además, la delegación de eventos hace un buen uso de "burbujas de eventos". Al hacer clic en un elemento infantil, de acuerdo con "Bubble de eventos", el elemento principal del elemento infantil captura el evento de clic y desencadena su propio método.
Espero que este artículo sea útil para la programación de JavaScript de todos.