Dom事件与Dom委托

事件捕获与事件冒泡

• 对一个多级元素，分别给每级设置监听函数，点击最里层元素的时候，监听函数调用顺序？
  • 浏览器同时支持两种调用顺序：首先从外向内看，然后从内向外调看
• 有监听函数就调用，并提供事件信息，没有就跳过
• 

事件捕获

• 从外向内找监听函数

事件冒泡

• 从内向外找监听函数

事件绑定API

• 开发者自己选择将监听函数放在哪个阶段

 divClassName.attachEventListener('click',fn,bool);
 /*
 bool为true：fn走捕获，在捕获函数的阶段就被调用
 bool不传或为falsy：fn走冒泡，在冒泡阶段被调用
 */

• divClassName.attachEventListener(e,fn,bool);(e对象被传给所有的监听函数，事件结束后，e对象就不存在了 )

target和currentTarget的区别

• e.target是指用户操作的元素
• e.currentTarget是程序员监听的元素
• 举例
  • div>span{文字},用户点击文字
  • e.target是span
  • e.currentTarget是div

一个特例

• 只有一个div被监听（不考虑父子同时被监听）
• fn分别在捕获阶段和冒泡阶段监听click事件
• 用户点击的元素就是开发者监听的
• ⭐这种情况下，不分冒泡和捕获的顺序，谁的监听事件写在前面就执行谁。

取消冒泡

• 捕获不可以取消，但是冒泡可以
• e.stopPropagation()可以中断冒泡，浏览器不再向上冒泡。
• 有的事件不可取消冒泡详情点击搜索事件的MDN文档,Bubbles为是否冒泡，Cancelable属性表示开发者是否可以取消冒泡

事件

• 浏览器自带事件参考
• 自定义事件参考

事件委托

• 原理：利用事件的冒泡原理
• 通俗来说，就是把一个元素响应事件的函数委托到另一个元素（一般是该元素的祖先元素）。真正绑定事件的元素是外层元素，当事件响应到需要绑定的元素上时，会通过冒泡机制从而触发它外层元素绑定的函数，然后执行。
• 如果要确定绑定某个元素，可以配合matches函数和if-else来触发事件。
• 也可以通过内到外递归的方式，要绑定的元素在指定范围内向上查找父级元素，直到到代理事件的函数

事件委托的实现

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

• 实现功能：把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：

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

• 上述代码可以精确匹配到某一类的元素上

优点

• 省内存
• 可以监听动态元素

学习dom过程中的相关实践

自己尝试封装的dom库函数