Eventos de JavaScript y enlace de eventos

evento

1. Flujo de eventos

   El flujo de eventos describe la secuencia de recepción de eventos de la página, incluido el flujo de propagación de eventos y el flujo de captura de eventos.

2. Generación de eventos (flujo de eventos de IE)

   Cuando el evento comienza, se propaga desde el elemento que desencadenó el evento nivel a nivel, de modo que cada nivel superior se desencadena, sabiendo que se propaga al objeto del documento.

   <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
   </div>
   当触发了son这个事件标签就会一级一级向上传播 son->father->grandfather
   

3. Captura de eventos

   Partiendo de elementos menos específicos al comienzo del evento para capturar el elemento objetivo predeterminado

   <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
   </div>
   事件捕获过程中，documnt首先接受到事件，然后沿着dom树一次向下一知道找到实际目标
   假如实际目标时son 那么触发过程就是 document->html->body->granderfather->faher->son 
   

4. Flujo de eventos DOM

   El flujo de eventos consta de tres etapas:

   1. Fase de captura de eventos

   2. En la etapa de destino

   3. Fase de burbujeo del evento

      Podemos usar el flujo de eventos para determinar qué etapa desencadenar el evento.

5. Evento vinculado

   1. evento dom nivel 0

      • div.onclick = function () {función de manejo de eventos}

   2. evento dom nivel 2

      • addEventListener ('click', function () {función de procesamiento de eventos}, boolean) // Usado en el navegador estándar

        // Cuando se vinculan varias funciones de procesamiento de eventos, la vinculación se ejecuta secuencialmente

        => booleano El valor predeterminado es falso, lo que significa que se activa la fase de burbujeo, y verdadero significa que se activa la fase de captura.

        div.addEventListener('click', function () {
                  
                  
                  console.log('你好 世界')
                })
        
                div.addEventListener('click', function () {
                  
                  
                  console.log('hello world')
                })
        
        //你好 世界
        //hello world
        

      • attachEvent ('onclick', function () {función de procesamiento de eventos}} // Usado en versiones inferiores de IE

        // Cuando se vinculan varias funciones de procesamiento de eventos, la vinculación se ejecuta en secuencia de flashback. Esta -> ventana

        div.attachEvent('onclick', function () {
                  
                  
                  console.log('你好 世界')
                })
        
                div.attachEvent('onclick', function () {
                  
                  
                  console.log('hello world')
                })
        
                div.attachEvent('onclick', function () {
                  
                  
                  console.log('我被点击了')
                })
        //我被电击了
        //hello world
        //你好 世界
        

      • Encapsular una función compatible

        function on(ele, type, handler) {
                  
                  
                  if (!ele) throw new Error('请按照规则传递参数')
                  if (ele.nodeType !== 1) throw new Error('事件源有问题')
        
                  // 2. 兼容处理
                  // div.addEventListener()
                  // div.attachEvent()
                  // 只要 元素 身上有这个函数, 就可以执行
                  // 没有这个函数就去换另一个函数试试
                  if (ele.addEventListener) {
                  
                  
                    ele.addEventListener(type, handler)
                  } else if (ele.attachEvent) {
                  
                  
                    ele.attachEvent('on' + type, handler)
                  } else {
                  
                  
                    // 对象操作语法 - 点语法
                    // ele.onclick = handler
                    // 对象操作语法 - 数组关联语法
                    // ele['onclick'] = handler
                    ele['on' + type] = handler
                  }
                }
        

6. Desvincular evento

   1. dom nivel 0 desvinculación

      • div.onclick = null

   2. dom nivel 2 desvinculación

      • removeEventListener ('Tipo de evento que se va a desvincular', función que se va a desvincular) // Navegador estándar

      • detachEvent ('en el tipo de evento', la función de procesamiento de eventos se desvinculará) // IE versión baja

   3. Encapsular una función compatible

      // 事件解绑封装
              function off(ele, type, handler) {
              
              
                if (!ele) throw new Error('请按照规则传递参数')
                if (ele.nodeType !== 1) throw new Error('事件源有问题')
                // 处理解绑的兼容
                if (ele.removeEventListener) {
              
              
                  ele.removeEventListener(type, handler)
                } else if (ele.detachEvent) {
              
              
                  ele.detachEvent('on' + type, handler)
                } else {
              
              
                  ele['on' + type] = null
                }
              }
      

7. Información del objeto de evento para eventos del mouse (clientX, offsetX, pageX)

   1. ¿Qué es un objeto de evento?

      • Cada vez que se activa un evento, se obtendrá un objeto de evento más nuevo.
      • Una descripción del incidente actual

      //获取事件对象
       // + 标准浏览器
                  //   => 直接在事件处理函数上接收一个形参
                  //   => 会在事件触发的时候, 由浏览器自动传递实参
                  // + IE 低版本
                  //   => 不需要接收形参
                  //   => 直接使用 window.event
                  //     -> 在标准浏览器下也可以使用
                  //     -> 官方给的还是兼容
                  // + 书写一个兼容方式
                  //e = e || window.event
      

   2. clienteX, clienteY

      • La posición del cursor desde la esquina superior izquierda de la ventana visible

   3. páginaX, páginaY

      • La posición del cursor desde la esquina superior izquierda del flujo de documentos

   4. offsetX, offsetY

      • La posición del cursor desde la esquina superior izquierda del elemento. Elemento: El elemento que el cursor desencadenó el evento (no la fuente del evento)
      • offsetX y offsetY representan (posición del mouse) en relación con las coordenadas del elemento principal más cercano (independientemente de si el principal está posicionado) (independientemente de quién lo activó)
      • Si no desea calcular las coordenadas de acuerdo con la esquina superior izquierda del elemento disparador del cursor en el interior, es como calcular las coordenadas de acuerdo con la fuente del evento estilo css pointer-event: none;