大前端

3.2.1 JS 事件流

事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之间交互的桥梁。

事件流

事件流描述的是从页面中接收事件的顺序。

  • 1.冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】

  • 2.捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

IE的事件流叫做事件冒泡。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
所有现代浏览器都支持事件冒泡，并且会将事件一直冒泡到window对象。

事件捕获的思想是不太具体的节点应该更早的接收到事件，而在最具体的节点应该最后接收到事件。事件捕获的用以在于事件到达预定目标之前捕获它。

3.DOM事件流

“DOM2级事件”规定事件流包括三个阶段，事件捕获阶段、处于目标阶段和事件冒泡阶段。
首先发生的事件捕获，为截获事件提供了机会。然后是实际的目标接收了事件。
最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

DOM0级事件处理程序

var myBtn=document.getElementById("myBtn");
myBtn.onclick=function(){
  alert("clicked!");
}
1
2
3
4

DOM2级事件处理程序

定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。

所有的DOM节点都包含这2个方法。

这两个方法都需要3个参数：事件名，事件处理函数，布尔值。

这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。

var myBtn=document.getElementById("myBtn");

myBtn.addEventListener("click",function(){
    alert("hello");
},false);

myBtn.addEventListener("click",function(){
    alert("world");
},false);
1
2
3
4
5
6
7
8
9
10

dom 事件中 target,currentTarget

1. target:触发事件的某个具体对象，只会出现在事件流的目标阶段（谁触发谁命中，所以肯定是目标阶段）
2. currentTarget:绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中
3. 通常情况下terget和currentTarget是一致的，我们只要使用terget即可，  
但有一种情况必须区分这三者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素  
（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），  
这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象，如下代码和截图所示：

<div id="one">
   <div id="three"></div>
</div>

one.addEventListener('click',function(e){
    console.log(e.target);  //three
    console.log(e.currentTarget);  //one
},false);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考

← 3.2.2 浅拷贝和深拷贝 →