Orden de ejecución de la difusión y captura de eventos.

He visto muchos artículos antes. Todos dicen uniformemente que la captura de eventos se ejecuta primero y la burbujeación se ejecuta después. De hecho, esto no es riguroso. Hoy solo tenemos tiempo para echarle un vistazo y dar un ejemplo.

  <div id="div1">
        我是div1
        <div id="div2">我是div2
            <div id="div3">
                我是div3
                <div id="div4">我是div4</div>
            </div>
        </div>
    </div>

Primero escribimos 4 divs, que son relaciones anidadas. Les configuré diferentes tamaños y colores de fondo. El efecto de visualización de la página es el siguiente

A continuación, necesitamos vincular la burbujeación y la captura a estos cuatro elementos respectivamente. En este momento, necesitamos usar addEventListener(). Este método necesita pasar tres parámetros.

El primer parámetro: el nombre del evento a ejecutar, tenga en cuenta que no puede contener on, por ejemplo, se debe escribir click en lugar de onclick.

Segundo parámetro: función de manejo de eventos ejecutada después de activar el evento

El tercer parámetro: realizar captura o burbujeo. falso significa burbujear, que también es el valor predeterminado, y verdadero significa capturar

 //冒泡
        oDiv1.addEventListener('click', function () {
            console.log("我是div1");
        });
        oDiv2.addEventListener('click', function () {
            console.log("我是div2");
        });
        oDiv3.addEventListener('click', function () {
            console.log("我是div3");
        });
        oDiv4.addEventListener('click', function (e) {
            console.log("我是div4");
        });
        //捕获
        oDiv1.addEventListener('click', function () {
            console.log("我是div1-1");
        }, true);
        oDiv2.addEventListener('click', function () {
            console.log("我是div2-2");
        }, true);
        oDiv3.addEventListener('click', function () {
            console.log("我是div3-3");
        }, true);
        oDiv4.addEventListener('click', function (e) {
            console.log("我是div4-4");
        }, true);

Después de vincular los parámetros, lo ejecutamos y los resultados de la ejecución son los siguientes:

En lo que hice clic es en div4. Puedes ver en los resultados a continuación que para 1-3, la captura se ejecuta primero y luego se ejecuta el burbujeo. Pero para nuestro div4, genera burbujeo primero y luego captura. Entonces, en este momento, modifíquelo y solo escriba el evento de captura de div4 antes del evento burbujeante de div4

//就是把div4的捕获写在前面
 oDiv4.addEventListener('click', function (e) {
            console.log("我是div4-4");
        }, true);
 oDiv4.addEventListener('click', function (e) {
            console.log("我是div4");
        });

Los resultados de la ejecución son los siguientes.

Entonces la demostración aquí es muy clara: para elementos anidados, primero se ejecuta la captura y luego se ejecuta la burbujeación.

Pero para el elemento desencadenado (aquí nos referimos a div4), el orden de ejecución de captura y burbujeo depende del orden en que se escribe el código, quién ejecuta quién delante

De esta manera todos pueden saber más claramente el orden de ejecución de capturar y burbujear ~ luchar.