fundamentos DOM (IX)

modelo de burbujeo caso de manejo de eventos de eventos de captura &&

• Captura de eventos: elementos anidados de la relación entre la estructura y la presencia de la función de captura de eventos, que es el mismo tipo de evento, la captura de elementos de padres a elementos secundarios

• burbujeo Evento: elementos anidados de la relación entre la estructura y función de la presencia de burbujeo evento, que es el mismo tipo de evento, de niño a elementos elemento padre burbujeantes

• Captura de eventos en una prioridad más alta que el burbujeo de eventos

  • prestar atención

    • IE no captura de eventos

    • Focuse, falta de definición, el cambio, presentar, reset, seleccionar otros eventos no burbujean

    • Firefox e IE pueden llamar al método setCapture a los sucesos de bloqueo, y releaseCapture uso con

      • Similar modelo de eventos de captura de eventos se puede utilizar para evitar que el ratón mientras arrastra el ratón se mueve demasiado rápido causados ​​por una pequeña caja de una caja pequeña

      • detectores de eventos de cromo ratón se pueden utilizar en el documento para evitar que el ratón se mueve demasiado rápido cuando se arrastra una pequeña caja

    • Un tipo de un controlador de eventos para un objeto DOM sólo hay un modelo de control de eventos

    • Un tipo de evento como un objeto DOM para unir dos controladores de eventos, dos controladores de eventos siguiendo el burbujeo evento y captura de eventos

      // html
      <div class="wrapper">
        <div class="content">
          <div class="box">click</div>
        </div>
      </div>
    
      // css
      .wrapper {
        width: 300px;
        height: 300px;
        background-color: #f00;
      }
      .content {
        width: 200px;
        height: 200px;
        background-color: #0f0;
        margin-left: 300px;
      }
      .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #00f;
        color: #fff;
        font-size: 26px;
        font-weight: bold;
        margin-left: 200px;
      }
    
      // js
      var wrapper = document.getElementsByClassName('wrapper')[0];
      var content = document.getElementsByClassName('content')[0];
      var box = document.getElementsByClassName('box')[0];
      wrapper.addEventListener('click', function () {
        console.log('wrapperBubble'); // 事件冒泡_6
      }, false);
      content.addEventListener('click', function () {
        console.log('contentBubble'); // 事件冒泡_5
      }, false);
      box.addEventListener('click', function () {
        console.log('boxBubble'); // 事件执行_3
      }, false);
      wrapper.addEventListener('click', function () {
        console.log('wrapper'); // 事件捕获_1
      }, true);
      content.addEventListener('click', function () {
        console.log('content'); // 事件捕获_2
      }, true);
      box.addEventListener('click', function () {
        console.log('box'); // 事件执行_4
      }, true);
    

• Seguir los eventos de propagación cancelado

  • W3C estándares event.stopPropagation () no es compatible con las siguientes versiones de IE9

  • event.cancelBubble

• Evitar que el evento predeterminado

  • eventos predeterminados: se envía el formulario, un salto etiqueta, menú del botón derecho, etc.

    // a标签取消默认事件的简易写法
    <a href="javascript:void(false)"></a>
  

  • event.preventDefault (); los estándares del W3C, los siguientes no son compatibles IE9

  • event.returnValue = false; IE compatible

  • return false; propiedades de los objetos registrados en la forma de eventos para que surtan efecto

• Objeto de evento: un conjunto de atributos y métodos cuando el sistema está controlador de eventos se ejecuta será empaquetado en un objeto de evento entrante a la forma de referencia controlador de eventos para su uso

  • objeto de evento IE se registra en window.event

• objeto de origen Evento

  • Firefox sólo esto event.target

  • event.srcElement IE sólo esto

  • Tal vez Chrome ha

    // 兼容性写法
    elem.click = function (event) {
      // 兼容性事件对象
      var e = event || window.event;
      // 兼容性事件源对象
      var target = event.target || event.srcElement;
    }
  

• delegados de eventos

  • No ciclo, de alta eficiencia

  • Dinámicamente escalable, tal como después de los elementos de demostración li se pueden añadir dinámicamente o borrados sin la necesidad de eventos de re-bind

    // html
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
    </ul>
  
    // js
    var ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function (e) {
      var target = e.target || e.srcElement;
      console.log(target.innerText);
    }