填坑-十万个为何？（14）

时间 2019-12-05

标签十万为何繁體版

原文原文链接

简介:不少概念不清或忘记，从新构建本身的知识体系。天天问本身1~多个问题。我是菜鸟成为大神之路!html

1. 事件，事件捕获和事件冒泡理解？

①有哪些事件？

菜鸟教程中的事件手册：www.runoob.com/jsref/dom-o…
W3school事件手册：www.w3school.com.cn/jsref/dom_o…node

②DOM事件流

"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，而后是实际的目标接收到事件，最后阶段是冒泡阶段。web

（1）捕获阶段（Capture Phase）
事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中通过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是创建传播路径，在冒泡阶段，事件会经过这个路径回溯到文档跟节点。
（2）目标阶段（Target Phase）
当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，而后会逆向回流，直到传播至最外层的文档节点。
（3）冒泡阶段（Bubble Phase）
事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。冒泡过程很是有用。它将咱们从对特定元素的事件监听中释放出来，若是没有事件冒泡，咱们须要监听不少不一样的元素来确保捕获到想要的事件。

③如何阻止捕获和冒泡？

调用 event.stopPropagation()。阻止冒泡
调用event.preventDefault()。阻止捕获浏览器

④如何添加事件监听？

JavaScript中事件监听的方法总共有三种，分别以下：dom

element.addEventListener(type, listener,[useCapture]);&emsp;&emsp;//IE6~8不支持
element.attachEvent('on' + type, listener)     //支持IE6~10，IE11不支持
element['on' + type] = function(){}     //支持全部浏览器

参数解释：
    type：事件类型
    listener：事件出发后的回调函数
    useCapture：是否使用捕获，若是值为true，useCapture表示用户但愿发起捕获。
    在发起捕获以后，只要DOM子树下发生了该事件类型，都会先被该事件监听器捕获，而后再被派发到DOM子树中的事件监听器中。
    而且向上冒泡的事件不会触发那些发起捕获的事件监听器。useCapture默认值是true。

例子：
function funEven(){
    console.log("添加事件");
}

element.addEventListener('click', funEven, false);
element.attachEvent('onclick', funEven);
element.onclick = funEven;
复制代码

2.委托（代理）事件理解？

通常来说，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到须要绑定的元素上时，会经过事件冒泡机制从而触发它的外层元素的绑定事件上，而后在外层元素上去执行函数。函数

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

咱们来实现把#list下的li元素的事件代理委托到它的父层元素也就是#list上：ui

// 给父层元素绑定事件
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);
  }
});
复制代码

在上述代码中， target元素则是在#list元素之下具体被点击的元素，而后经过判断 target 的一些属性（好比：nodeName，id等等）能够更精确地匹配到某一类#list li元素之上；spa

参考文章：
①JavaScript 事件委托详解
②JS的事件处理机制以及事件代理（事件委托）.net