Comprenda brevemente la difusión, delegación, vinculación y propagación de eventos de JavaScript.

Eventos burbujeantes

1. : el evento burbujeante significa que el evento es recibido inicialmente por el elemento más específico y luego se propaga hacia arriba a nodos menos específicos.
2. La propagación de eventos está habilitada de forma predeterminada, pero se puede controlar mediante el código js.

Características:

• Cuando se activa nuestra función de evento, la función de evento realmente recibirá un objeto de evento.

• Cuando ejecutamos el método event.stopPropagation() en nuestra función de evento, la propagación del evento termina aquí.

• No todos los tipos de eventos admiten la difusión de eventos.

• La difusión de eventos solo activará funciones de eventos del mismo tipo.

Dos formas de evitar eventos de difusión

Hay dos formas de evitar eventos de difusión, una es una propiedad y la otra es un método.

cancelBubble

establece o devuelve si el evento debe propagarse al nivel superior.

Sintaxis: event.cancelBubble = true;

stopPropagation()

evita que el evento se propague más en el flujo de eventos.

Sintaxis: event.stopPropagation();

Ejemplo: vincular funciones de respuesta de clic a tres objetos que son mutuamente padre e hijo.

ventana.onload = función(){
      var span = document.getElementById("sp");
      span.onclick = función(){
          alerta('etiqueta de extensión');
          
      }
      var cuadro = document.getElementById('cuadro3');
      box3.onclick = función(){
          alerta('cuadro3');
      }
      var cuerpo = documento.cuerpo;
      cuerpo.onclick = función(){
          alerta('cuerpo');
      }}

Evitar burbujas en la caja:

ventana.onload = función(){
      var span = document.getElementById("sp");
      span.onclick = función(){
          alerta('etiqueta de extensión');
          
      }
      var cuadro = document.getElementById('cuadro3');
      box3.onclick = función (evento) {
          alerta('cuadro3');
           evento.stopPropagation();

      }
      var cuerpo = documento.cuerpo;
      cuerpo.onclick = función(){
          alerta('cuerpo');
      }}

Delegar eventos

Cuando tenemos un montón de subetiquetas con los mismos eventos, podemos agregarles eventos atravesando las subetiquetas, pero si se agrega un nuevo elemento de subetiqueta, debemos volver a vincular la nueva subetiqueta elemento, de lo contrario no es válido.

El atributo

vincula el evento al elemento ancestro , de modo que cuando se activa el evento en el elemento hijo, se propagará al elemento ancestro y el evento se procesará a través del evento de respuesta del elemento ancestro. Al utilizar la distribución y la delegación, puede reducir la cantidad de enlaces de eventos y mejorar el rendimiento del programa.

Obtenga el elemento en el que se hizo clic.

Después de vincular un evento al elemento ancestro, no importa en qué elemento hagamos clic dentro del elemento ancestro, se activará el evento correspondiente. Solo esperamos que el evento se active cuando hagamos clic en un elemento dentro del ancestro. elemento En este momento, debemos dar una condición de juicio, ya sea el elemento que queremos desencadenar el evento.

target

devuelve el elemento que desencadenó el evento.

Sintaxis: event.taget;

ventana.onload = función(){
     var ul = document.getElementById('ul1');
     ul.onclick = función (evento) {
         if(event.target.className == 'abq'){
             alerta('¡¡Evento activado!!')
         } 
     }
     //Agregar hipervínculo document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>Nueva etiqueta</a>";
         ul.appendChild(li);
     }
 }

Vincular eventos mediante addEventListener()

Mediante este método, puede vincular múltiples funciones de respuesta de eventos idénticas al mismo elemento.

• Parámetros:

1. la cadena del evento, no use la
2. función de devolución de llamada. Esta función se llamará cuando se active el evento.
3. Si se activa el evento en la fase de captura, se requiere un valor booleano. El valor predeterminado es falso

. para vincular el mismo evento a un elemento al mismo tiempo. Defina múltiples funciones de respuesta, de modo que cuando se active el evento, las funciones de respuesta se ejecuten en el orden en que están vinculadas.

ventana.onload = función(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('hacer clic',función(){
        alert('¡Se activó la función correspondiente al primer clic!')
    },FALSO);
    bt.addEventListener('hacer clic',función(){
        alert('¡Se activó la función correspondiente al segundo clic!')
    },FALSO);
    bt.addEventListener('hacer clic',función(){
        alert('¡Se activó la función correspondiente al tercer clic!')
    }, false);}

Difusión de eventos

• Netscape y Microsoft tienen diferentes interpretaciones de la difusión de eventos:
  Microsoft cree que los eventos deben propagarse de adentro hacia afuera , es decir, cuando se activa un evento, el evento en el elemento actual debe activarse primero y luego propagarse a los elementos ancestros del elemento actual, lo que significa que el evento debe propagarse desde adentro hacia afuera. ejecutarse en la etapa de burbujeo .
  Netscape cree que los eventos deben propagarse desde afuera hacia adentro , es decir, cuando se activa el evento actual, el evento del elemento ancestro más externo del elemento actual debe activarse primero y luego propagarse hacia adentro a los elementos descendientes.
• W3C combina las soluciones de las dos empresas y divide la propagación de eventos en tres etapas:

1. la etapa de captura En la etapa de captura, los eventos se capturan desde el elemento ancestro más externo al elemento de destino, pero de forma predeterminada el evento no se activará en este momento. .
2. El evento de la fase de destino captura el elemento de destino y la captura finaliza y comienza a desencadenar eventos en el elemento de destino.
3. El evento de la fase de burbujeo se pasa del elemento objetivo a sus elementos ancestros, lo que a su vez desencadena eventos en los elementos ancestros.

La función de respuesta se ejecuta durante la fase de burbujeo. El tercer parámetro predeterminado es false

window.onload = function(){
     var cuadro1 = document.getElementById('cuadro1');
     var cuadro2 = document.getElementById('cuadro2');
     var cuadro3 = document.getElementById('cuadro3');
     box1.addEventListener('clic',función(){
         alerta('cuadro1');
     },FALSO);
     box2.addEventListener('hacer clic',función(){
         alerta('cuadro2');
     },FALSO);
     box3.addEventListener('hacer clic',función(){
         alerta('cuadro3');
     },FALSO);
 }

Si desea activar el evento durante la fase de captura, puede establecer el tercer parámetro de addEventListener() en verdadero.

ventana.onload = función(){
     var cuadro1 = document.getElementById('cuadro1');
     var cuadro2 = document.getElementById('cuadro2');
     var cuadro3 = document.getElementById('cuadro3');
     box1.addEventListener('clic',función(){
         alerta('cuadro1');
     },verdadero);
     box2.addEventListener('hacer clic',función(){
         alerta('cuadro2');
     },verdadero);
     box3.addEventListener('hacer clic',función(){
         alerta('cuadro3');
     },verdadero);
 }