¿Por qué necesitas AddEventListener?
Echemos un vistazo a un clip:
código HTML
<div id = "box"> persiguiendo sueños </div>
Código con
Window.Onload = function () {var box = document.getElementById ("box"); box.OnClick = function () {console.log ("soy box1"); } box.onclick = function () {box.style.fontSize = "18px"; console.log ("soy box2"); }} En ejecución del resultado: "Soy Box2"Lo vi, el segundo OnClick sobrescribe el primer OnClick. Aunque en la mayoría de los casos podemos usar para completar los resultados que queremos, a veces necesitamos ejecutar múltiples eventos idénticos. Es obvio que si no podemos usar para completar lo que queremos, entonces no hay necesidad de adivinar. Debes saber, ¿verdad! AddEventListener puede unir el mismo evento varias veces y no sobrescribirá el evento anterior.
Código con addEventListener
Window.Onload = function () {var box = document.getElementById ("box"); box.adDeventListener ("Click", function () {console.log ("I am box1");}) box.adDeventListener ("haga clic", function () {console.log ("i am cox2");})} Ejecutando el resultado: soy box1 I Am Box2El primer parámetro del método AddEventListEnert se llena en el nombre del evento. Tenga en cuenta que no necesita escribir. El segundo parámetro puede ser una función. El tercer parámetro se refiere al proceso del controlador de eventos en la etapa de burbuja o en la etapa de captura. Si True representa el procesamiento de la etapa de captura, si False representa el procesamiento de la etapa de burbuja, se puede omitir el tercer parámetro. En la mayoría de los casos, el tercer parámetro no necesita ser utilizado. Si el tercer parámetro no está escrito, el falso predeterminado es falso.
Uso del tercer parámetro
A veces este es el caso
<Body>
<div id = "box">
<div id = "niño"> </div>
</div>
</body>
Si agrego un evento de clic en el cuadro, no hay problema si hago clic en el cuadro directamente, pero si hago clic en el elemento infantil, ¿cómo lo hace? (Orden de ejecución)
box.adDeventListener ("clic", function () {console.log ("box");}) child.addeventListener ("hacer clic", function () {console.log ("niño");} Resultado: casilla infantil:Es decir, el evento predeterminado se realiza en el orden en que burbujea el evento.
Si el tercer parámetro se escribe como verdadero, se realizará en el orden de ejecución de la captura de eventos.
box.adDeventListener ("clic", function () {console.log ("box");}, true) child.addeventListener ("hacer clic", function () {console.log ("niño");}) Resultado de la ejecución: box ChildProceso de ejecución de burbujas de eventos:
Comience a burbujear hacia arriba desde el elemento más específico (el elemento en el que hizo clic). Tome nuestro caso arriba y su orden es: Child-> Box
Proceso de ejecución de captura de eventos:
Comience a burbujear en el interior del elemento menos específico (el cuadro en el más externo). Tome nuestro caso arriba y el pedido es: Box-> Child
El artículo anterior comprende de manera integral la diferencia entre AddEventListener y ON es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.