事件模型

DOM事件模型/机制

一个事件发生之后，会在子元素个父元素之间进行传播，这种传播又分为三个阶段：

事件捕获：从外向内找监听函数——由微软公司提出
在目标节点触发事件
事件冒泡：从内向外找监听函数——由网景公司提出
W3C标准：首先捕获，再冒泡。

捕获

一个事件在被触发之时，浏览器会自动从用户操作标签外的最上级标签中逐渐向里面检查是否有相同的事件，如果有则触发，如果没有就继续向下检查，一直到用户操作的标签。这个过程就是捕获。

冒泡

此时浏览器会继续由用户操作标签向上级标签检查，如果发现有相同的事件测触发，如果没有就继续向上级检查指导最上级为止，这过程就是冒泡。

事件绑定API addEventListener

IE5：e.attachEvent(‘onclick’, fn) //事件冒泡
网景：e.addEventListener(‘click’, fn) //事件捕获
W3C：e.addEventListener(‘click’, fn, bool) //如果bool不传或为falsy，则fn使用事件冒泡，反之则使用事件捕获。

target和currentTarget的区别

e.target 是用户操作的元素，e.currentTarget 是程序员监听的元素。

取消冒泡

捕获不能取消，冒泡可以 e.stopPropagation(), 中断冒泡。

阻止默认动作

使用event.preventDefault()可以取消默认事件。

事件委托

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

事件委托的优点

减少内存消耗,例如下面的代码：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；
因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；
所以事件委托可以减少大量的内存消耗，节约效率。

动态绑定事件
比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件；
在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；
如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；
所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

封装事件委托函数 on()

<div id="div1"></div>
<script>
setTimeout(()=>{
   const button = document.creatElement('button')
   button.textContent = 'click 1'
   div1.appendChild(button)
},1000)

on('click','#div1','button',()=>{
   console.log('button被点击了')
})

function on(eventType, element, selector, fn){
   //判断如果element不是元素
   if(!(element instanceof Element)){
     element = document.querySelector(element)
   }
   element.addEventListener(eventType,(e)=>{
      const t = e.target
      //matches判断一个元素是否满足一个选择器                 
      if(t.matches(selector)){
          fn(e)
       }
   })
 }
</script>

DOM 事件模型/机制与事件委托