Generación de eventos y captura de eventos y delegación de eventos

1. Evento burbujeante

Generación de eventos: los elementos en una relación de anidamiento estructural (no visual) tendrán la función de propagación de eventos, es decir, el mismo evento, propagación del elemento secundario al elemento principal.

Acerca de la captura de eventos y el diagrama de proceso de propagación de eventos: el orden de los dos es capturar primero y luego propagar.

La propagación de eventos es cuando se hace clic en el elemento en el cuadro principal, el evento del elemento secundario se activa primero y luego el evento. de la caja principal se activa.

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

  let wrapper = document.getElementsByClassName('wrapper')[0]
  let content = document.getElementsByClassName('content')[0]
  let box = document.getElementsByClassName('box')[0]
    // 冒泡
  wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
  content.addEventListener('click',()=>console.log("content1") ,false)
  box.addEventListener('click',()=>console.log("box1") ,false)

El resultado de la impresión después de hacer clic en el cuadro del elemento secundario es como se muestra en la figura siguiente, y se ha producido un burbujeo de eventos.

2. Captura de eventos

Captura de eventos: solo puede haber un tipo de evento de un objeto en Google Chrome.
El tercer parámetro de addEventListener se convierte en falso en verdadero. El burbujeo se convierte en la función de captura. El cuadro principal captura el evento primero y el cuadro secundario captura la
estructura. Los elementos anidados superiores (no visualmente) tendrán la función de captura de eventos, es decir, el mismo evento se captura del elemento padre al elemento hijo (elemento fuente del evento)

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

let wrapper = document.getElementsByClassName('wrapper')[0]
    let content = document.getElementsByClassName('content')[0]
    let box = document.getElementsByClassName('box')[0]

    // 捕获
    wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

Orden de impresión: sin

embargo, cuando el código puede mostrar captura y burbujeo al mismo tiempo

 wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

    wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
    content.addEventListener('click',()=>console.log("content1") ,false)
    box.addEventListener('click',()=>console.log("box1") ,false)

Se puede ver que el orden es primero capturar y luego burbujear.

Habla de esto en estas pepitas

3.addEventListener

addEventListener es la operación de un nuevo controlador de eventos designado para eventos DOM2. Este método recibe 3 parámetros: el nombre del evento que se procesará, como función del controlador de eventos, y un valor booleano. Si el valor booleano es verdadero, significa que está capturando El controlador de eventos se llama en la fase; si es falso, significa que el controlador de eventos se llama en la fase de propagación.
addEventListener tercer parámetro

4. Delegación de eventos

Utilice la propagación de eventos para procesar con el objeto de origen de eventos.
Ventajas:
1. El rendimiento no requiere que se repitan todos los elementos para vincular los eventos uno por uno.
2. Flexible Cuando hay nuevos elementos secundarios, no es necesario volver a vincular los eventos.

Ejemplo Haga clic en la etiqueta li para imprimir el contenido de la etiqueta correspondiente.
Conocimiento primario: evento objeto evento y evento objeto fuente evento evento.

<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  //利用事件冒泡将子元素li的点击事件委托到父元素ul上 点击对应的li答应出li的内容
let ul = document.getElementsByClassName('ul')[0]
    ul.onclick = e => {
    
    
      console.log(e)
      console.log(e.target)
      console.log(e.target.innerText)
    }

suplemento

• Los eventos como enfocar, desenfocar, cambiar, enviar, restablecer, seleccionar, etc.no aparecen
• Cancelar el burbujeo:
  evento estándar W3C.stopPropagation (); pero no admite versiones inferiores a ie9
  IE evento único.cancelBubble = true;
• Evitar eventos predeterminados:
  evento predeterminado - envío de formulario, un salto de etiqueta, menú contextual, etc.
  1.revolver falso; solo los eventos registrados como propiedades de objeto tienen efecto
  2.event.preventDefault (); marca W3C, no compatible con IE9 y debajo de
  3. event.returnValue = false; Compatible con IE