fundamentos de DOM (ocho)

evento

Evento es una función básica de la experiencia interactiva

• manejador de eventos de unión

  • elem.onxxx = function (evento) {}

    • Programar este punto elem el propio elemento

    • estilo de mango de la escritura, la compatibilidad es muy buena, pero el mismo evento en el mismo elemento sólo puede enlazar un controlador de eventos

    • Dos redacción sustancialmente idéntica

      // 写法一
      <div id="demo" onclick="console.log('a')"></div>
    
      // 写法二
      demo.onclick = function () {
        console.log('a');
      }
    

  • obj.addEventListener (tipo: tipo de evento, fn: manipulador, false);

    • Programar este punto elem el propio elemento

    • IE9 no es compatible con el siguiente, puede enlazar varios controladores de eventos para un evento

    • Puede enlazar varios controladores para el mismo evento del mismo elemento, y seguir el orden de enlace de los acontecimientos

      dom.addEventListener('click', function () {
        console.log('a');
      }, false);
      dom.addEventListener('click', function () {
        console.log('a');
      }, false);
    
      // 执行结果打印两遍a, 因为两个函数长得一样但是地址不同
    

      function test () {
        console.log('a');
      }
      dom.addEventListener('click', test, false);
      dom.addEventListener('click', test, false);
    
      // 执行结果打印一遍a, 因为是同一个函数
    

  • obj.attachEvent ( 'on' + tipo, fn);

    • Programar esta ventana de su valor, la solución es la siguiente

      var elem = ...;
      
      elem.attachEvent('onclick', function () {
        // this === window
        
        handler.call(elem);
      });
    
      function handler() {
        // this === elem
      }  
    

    • IE es único, un evento puede enlazar varios controladores de eventos

      dom.attachEvent('click', function () {
        console.log('a');
      });
      dom.attachEvent('click', function () {
        console.log('a');
      });
    
      // 执行结果打印两遍a
    

      function test () {
        console.log('a');
      }
      dom.attachEvent('click', test);
      dom.attachEvent('click', test);
    
      // 执行结果打印两遍a
    

• Prueba: Use js nativos, addEventListener, a cada elemento de unión li un evento de clic, la salida de su orden

  <ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
  </ul>

  var lis = document.getElementsByTagName('li'),
    len = lis.length;

  // es5
  for (var i = 0; i < len; i++) {
    (function (i) {
      lis[i].addEventListener('click', function () {
        console.log(i);
      }, false);
    }(i))
  }

  // es6
  for (let i = 0; i < len; i++) {
    lis[i].addEventListener('click', function () {
      console.log(i);
    }, false);
  }

---

controlador de eventos de levantamiento

• elem.onclick = false || '' || nulo;

  // 一次性事件写法

  elem.onclick = function () {
    // ...
    this.onclick = null;
  }

• elem.removeEventListener (tipo, fn, false);

• elem.detachEvent ( 'on' + tipo, fn);

• Cuando la función anónima con destino no puede ser liberado