1. ¿Qué es la Comisión de Eventos? En términos de laicos, los eventos son OnClick, OnMouseOver, On MouseOut, etc., etc. son eventos. En cuanto a la delegación, se les pide que lo hagan. Este evento se agregó originalmente a ciertos elementos, pero se lo agrega a otros para que lo haga para completar el evento.
Es decir: use el principio de burbujas para agregar eventos al padre para activar el efecto de ejecución.
Beneficios: 1. Mejorar el rendimiento.
Podemos ver un ejemplo: cada LI necesita ser activado para cambiar su color de fondo.
<ul id = "ul"> <li> aaaaaaaa </li> <li> bbbbbbbb </li> <li> ccccccccccccccccc </li> </ul> window.onload = function () {var oUl = document.getElementById ("ul"); var ali = oUl.getElementsBytagName ("li"); i <ali.length;De esta manera, podemos agregar eventos del mouse en Li.
Pero si podemos tener muchos para bucles, afectará el rendimiento.
A continuación podemos usar la delegación de eventos para lograr este efecto. HTML permanece sin cambios
Window.Onload = function () {var oul = document.getElementById ("ul"); var ali = oUl.getElementsBytagName ("li");/*La fuente del evento debe usarse aquí: objeto de evento, fuente de evento. No importa en qué evento se encuentre, siempre que el elemento que opera es la fuente del evento. es decir: window.event.srcelement Standard: event.TargetNodeName: busque el nombre de la etiqueta del elemento */oUl.onmouseover = function (ev) {var ev = ev || Window.event; var Target = Ev.Target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowerCase () == "li") {target.style.background = "rojo";}} oUl.onmouseout = function (ev) {var = ev || Window.event; var Target = Ev.Target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}}}Beneficio 2, los elementos recién agregados también tendrán eventos anteriores.
También tomamos este ejemplo, pero necesitamos agregar Li dinámicamente. Haga clic en el botón para agregar Li dinámicamente
como:
<input type = "Button" id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> bbbbbbbbbbb </li> <li> ccccccccccc </li> </ul>
Haremos esto sin la comisión de eventos:
Window.Onload = function () {var oUl = document.getElementById ("ul"); var ali = oUl.getElementsByTagName ("li"); var obtn = document.getElementById ("btn"); var inow = 4; for (var i = 0; i <ali.length; i ++) {ali] .iMouseOver "rojo";} ali [i] .onmouseout = function () {this.style.background = "";}} oBtn.onClick = function () {inow ++; var oli = document.createElement ("li"); oli.innerhtml = 1111 *inow; oUl.appendChild (oli);}}}}}}}Al hacer esto, podemos ver que haga clic en el botón recientemente agregado LI en el LI sin el evento que se mueve el mouse para cambiar su color de fondo.
Porque el bucle for se ha ejecutado al hacer clic para agregar.
Luego lo hacemos delegando el evento. Es solo que el HTML permanece sin cambios
Window.Onload = function () {var oul = document.getElementById ("ul"); var ali = oUl.getElementsByTagName ("li"); var obtn = document.getElementById ("btn"); var inow = 4; oUl.onMouseOver = function (ev) {var ev = ev || Window.event; var Target = Ev.Target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowerCase () == "li") {target.style.background = "rojo";}} oUl.onmouseout = function (ev) {var = ev || Window.event; var Target = Ev.Target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}} oBTN.OnClick = function () {inow ++; var oli = document.createElement ("li"); oli.innerhtml = 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 para deberíaitan111111. *inow; oUl.appendChild (oli);}}DE ACUERDO:
Al igual que en nuestras publicaciones de Weibo, todavía hay eventos anteriores del mouse en la nueva publicación de Weibo.
Lo anterior es la puesta en marcha y los beneficios del evento en JavaScript presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!