简介:很多概念不清或忘记，重新构建自己的知识体系。每天问自己1~多个问题。我是菜鸟 成为大神之路!

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

①有哪些事件？

菜鸟教程中的事件手册：

W3school事件手册：

②DOM事件流

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

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

③如何阻止捕获和冒泡？

调用 event.stopPropagation()。阻止冒泡

调用event.preventDefault()。阻止捕获

④如何添加事件监听？

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

element.addEventListener(type, listener,[useCapture]);  //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.委托（代理）事件理解？

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

    
  
     
item 1
  
     
item 2
  
     
item 3
  ......  
     
item n
    
// ...... 代表中间还有未知数个 li复制代码

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

// 给父层元素绑定事件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元素之上；

参考文章：

①

②