事件委托

118 阅读1分钟
(() => {
    let ndContainer = document.getElementById('js-list');
    if (!ndContainer) return;
    for (let i = 0; i < 300; i++) {
      var ndItem = document.createElement('li');
      ndItem.innerText = i + 1;
      ndContainer.appendChild(ndItem);
    }
    ndContainer.addEventListener('click', function(e) {
      if ((e.target.tagName == 'LI')) {
        // 如果没有该条件,ndContainer3下面的每一个元素都会执行该方法
        // 默认是false 是事件冒泡,执行顺序为从子到父  
        // 阻止事件冒泡的方法:event.stopPropagation()
        // 如果为true  是事件捕获,执行顺序为从父到子 
        // 阻止事件捕获的方法:event.stopImmediatePropagation();
        // 但是由于老的浏览器不支持,所以很少有人使用事件捕获。
        console.log(e.target.innerText);
      }
    });
  })();
    ```