Comprensión de los objetos de eventos, los objetos de origen de eventos y el flujo de eventos en js

Análisis y comprensión de objetos de eventos, objetos de origen de eventos y flujo de eventos en js

Evento

1. Qué es un evento: un evento se refiere a todos los eventos que pueden ocurrir y son monitoreados en js, tales como: (mouse, teclado y cambios en la ventana del navegador, etc.)
2. Qué es un objeto de evento (evento): En términos generales, es un objeto que registra información diversa sobre un evento.
   Cabe señalar aquí que el objeto de evento tendrá problemas de compatibilidad. Es un evento en navegadores distintos de IE, en lugar de window.event en navegadores.

btn.onclick = function(event){
    
    
let e = event || window.event
}

Objeto de origen de eventos

En pocas palabras, significa que el evento ocurrió en ese objeto. Para el elemento elemento, el objeto de origen del evento se refiere al elemento en el que hizo clic. También existen problemas de compatibilidad del navegador:

• Event.srcElement en fireFox
• 
  Consulte el objeto de evento para la escritura compatible con event.target en IE

Flujo de eventos

El flujo de eventos se divide principalmente en dos categorías: 1. Capturar eventos 2. La secuencia desencadenante de eventos de burbujeo es capturar primero
y luego burbujear, pero si se subdivide, habrá una etapa objetivo en la fase de burbujeo, es decir, la fase específica funcionamiento del elemento dom. Fase de funcionamiento

Capturar evento

El nodo superior recibe el evento primero y luego lo propaga a nodos específicos. Por ejemplo: cuando el usuario hace clic en el elemento div y usa la captura de eventos, el evento de clic se propagará en el orden de document> htm> body> div. El método de transferencia es de afuera hacia adentro.

Evento burbujeante

A diferencia del evento de captura, se pasa de adentro hacia afuera, cuando el usuario hace clic en el div, se pasa al padre, div> body> html. *** Porque esta función se usa a menudo para la delegación de eventos.

Delegación de eventos

Vinculamos el mismo evento desencadenado por todos los elementos secundarios al elemento principal, lo que puede reducir las operaciones DOM y mejorar el rendimiento. El método de uso específico es utilizar el objeto de origen del evento.

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

Para vincular eventos de clic a li, nuestro enfoque habitual es recorrer los eventos de clic de campo li

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
    
    
            oLi[i].onclick = function(){
    
    
                console.log("i")
            }
        }

Y la forma de utilizar la delegación de eventos es

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
    
    
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

• ventaja
• Para mejorar el rendimiento, no es necesario repetir todos los elementos uno por uno para vincular eventos.
• Los elementos nuevos y flexibles creados de forma dinámica no necesitan volver a enlazar eventos.

Evite la propagación de eventos y evite los eventos predeterminados

Operación para evitar la propagación de eventos (escritura de compatibilidad)

*** Algunos eventos no requieren operación de burbujeo

function stopBubble(event){
    
    
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法
}

Prevenir eventos predeterminados (escritura compatible)

*** Evita que una etiqueta y el botón derecho del mouse aparezcan en los eventos de menú y salto predeterminados

function cancelHandle(event){
    
    
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/
}

Solo para referencia de aprendizaje