使用原生JS 实现事件委托

JavaScript事件代理

事件绑定

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。

事件冒泡及捕获

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。

img

事件委托

当需要点击h1标签或h1标签里元素的时候，在点击h1时启动监听效果。

  
我是p
  
我是h1

var div = document.querySelector('div')
//监听原事件委托的次数太多，严重影响性能
div.addEventListener('click',function(e ){
  var t = e.target
  while(t.tagName !== 'H1'){
    t = t.parentNode
    if(t === div){
      t = null
      break;
//while循环时，已找到父元素，就不需要再往上一级寻找，直接断开循环。
    }
  } if (t) {
    console.log('h1')
  } else{
    console.log('你点击的不是div里的h1')
  }
})