Una explicación detallada de los objetos de eventos, los objetos de origen de eventos y los flujos de eventos en js

• Qué son los eventos: Los eventos se refieren a todos los eventos que pueden ocurrir en js y se monitorean, como por ejemplo: (mouse, teclado, cambios en la ventana del navegador, etc.)

• ¿Qué es un objeto de evento (evento)? En términos sencillos, es un objeto que registra información diversa sobre el evento.
  Lo que hay que tener en cuenta aquí es que el objeto de evento tendrá problemas de compatibilidad en navegadores distintos de IE, pero en los que no son navegadores, es window.event.

 btn.onclick = función(evento){let e = evento || ventana.evento}

En pocas palabras, se refiere al objeto específico en el que ocurrió el evento. Para los elementos de elemento, el objeto de origen del evento se refiere al elemento en el que hizo clic. También hay problemas de compatibilidad del navegador:

• En Firefox es event.srcElement
• En IE es event.target
  El método de escritura compatible se refiere al objeto del evento.

flujo de eventos

Los flujos de eventos se dividen principalmente en dos categorías: 1. Eventos de captura 2. Eventos de burbujeo El orden de activación es capturar primero y luego burbujear. Pero si se subdivide, habrá una etapa de destino después de que se capture la etapa de burbujeo. es decir, el elemento DOM que se opera específicamente en la etapa de operación que se llevará a cabo.

capturar eventos

El nodo superior primero recibe el evento y luego lo propaga hacia abajo hasta el nodo específico. por ejemplo: cuando el usuario hace clic en el elemento p y utiliza la captura de eventos, el evento de clic se propagará en el orden documento>htm>cuerpo>p. El modo de transmisión es del exterior al interior.

eventos burbujeantes

Al contrario del evento de captura, se pasa de adentro hacia afuera. Cuando el usuario hace clic en p, se pasa al padre, p>body>html. ***Porque esta función se utiliza a menudo para la delegación de eventos.

delegación de eventos

Vinculamos los mismos eventos para que todos los elementos secundarios los activen al elemento principal, lo que puede reducir las operaciones DOM y mejorar el rendimiento. El método de uso específico es utilizar el método del 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, normalmente nuestro enfoque es recorrer los eventos de clic a li.

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].al hacer clic = función(){
                consola.log("i")
            }
        }

La forma de utilizar la delegación de eventos es

 let oUl = document.querySelector("ul")
  oUl.onclick = función(evento){
            let e = evento || ventana.evento
            consola.log(e.target.innerHTML)
        }

• ventaja
• Mejore el rendimiento, no es necesario recorrer todos los elementos para vincular los eventos uno por uno.
• Se pueden crear dinámicamente elementos nuevos y flexibles sin volver a vincular eventos.

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

***Algunos eventos no requieren operaciones de burbujeo

 función detenerBurbuja(evento){
    var e = event||window.event //Método de escritura compatible con el objeto de evento e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //Método de escritura compatible con IE}

Bloquear eventos predeterminados (método de escritura compatible)

***Bloquear una etiqueta y eventos de menú y salto predeterminados con el botón derecho del mouse

 función cancelarHandle(evento){
    var e = evento||ventana.evento
    e.preventDefault()? e.preventDefault(): e.returnValue = false/*es decir*/}

Recomendaciones relacionadas: [videotutorial de JavaScript]

Lo anterior es una explicación detallada del objeto de evento, el objeto de origen del evento y el flujo de eventos en js. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.