浅谈JavaScript事件捕获事件冒泡与事件委托

[xccjk]

事件捕获

• 事件捕获中，父级元素先触发，子集元素后触发
• 事件会从最外层开始，直到具体的元素，比如click的捕获过程document->html->body->div->p

事件冒泡

• 事件冒泡时，子元素先出发，父级元素后触发
• 元素自身事件被触发后，如果父元素有相同的事件，那么元素本身的触发状态就会传递，就是冒到父元素，父元素相同事件也会一级级向外触发
• 默认情况下，所有事件处理程序都是在冒泡阶段注册的
• 如果想早捕获阶段注册事件，通过addEventListener来注册应用程序，并将第三个属性设置为true就可以了

<div id='app'>
  <h2>事件捕获</h2>
  <div id="item1">
    第一层
    <div id="item2">
      第二层
      <div id="item3">
        第三层
      </div>
    </div>
  </div>
</div>
<script>
  function handleClick1(){
    console.log('第一层')
  }
  function handleClick2(){
    console.log('第二层')
  }
  function handleClick3(){
    console.log('第三层')
  }
  const isCapture = false
  // isCapture为false时，为事件冒泡
  // 打印 第三层 -> 第二层 -> 第一层
  // isCapture为true时，为事件捕获
  // 打印 第一层 -> 第二层 -> 第三层
  document.getElementById('item1').addEventListener('click', handleClick1, isCapture)
  document.getElementById('item2').addEventListener('click', handleClick2, isCapture)
  document.getElementById('item3').addEventListener('click', handleClick3, isCapture)
</script>

事件代理

• 事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素
• 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
• 减少内存消耗

实际应用

• 给ul下的li绑定点击事件，通过把事件绑定在ul上，来避免每一个li上绑定事件

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
})