一、什么是事件流？

 
  事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接收事件的顺序。 
 

 
  一个事件被触发后，一般会有三个不同的阶段：捕获阶段、目标阶段和冒泡阶段。 
 

 
  捕获阶段：从文档的根节点开始流到目标节点。——由外到内 
 

 
  目标阶段：当到达目标节点时，进入目标阶段。——由内到外 
 

 
  冒泡阶段：冒泡正好跟捕获的方向相反，它会沿着捕获的路径往回走，直至根节点。 
 

 
  1、一个完整的JS事件流是从window开始，最后回到window的一个过程 
 

 
  2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程 
 

 
  3、在冒泡过程中6比7早触发。 
 

二、事件冒泡

事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播。

<div id="myDiv" style="width:100px;height:100px;background-color: red"></div>

 
  当用户点击了<div>元素，click事件将按照<div>——><body>——><html>——>document的顺序进行传播。若在<div>和<body>上都定义了click事件，如下： 
 

var div=document.getElementById("myDiv");   
div.onclick=function(event){            
  alert("div");       
};        
document.body.onclick=function(event){            
  alert("body");       
};

 
  点击<div>，将先输出“div”，再输出“body”。 
 

二、事件捕获

 
  先由最上一级的节点先接收事件，然后向下传播到具体的节点。当用户点击了<div>元素，采用事件捕获，则click事件将按照document—><html>—><body>—><div>的顺序进行传播。 
 

 
  若在<div>和<body>上都定义了click事件，如下： 
 

var div=document.getElementById("myDiv");    
div.addEventListener("click",function(event){
  alert("div");
},true);
document.body.addEventListener("click",function(event){
  alert("body");
},true);

 
  点击<div>，将先输出“body”，再输出“div”。 
 

 
  HTML DOM  
  addEventListener() 
   方法 
 

 
  addEventListener() 方法用于向指定元素添加事件句柄。 
 

 
  提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 
 

 
  注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用attachEvent()方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。 
 

 
  语法 
 

 
  element 
  .addEventListener( 
  event 
  ,  
  function 
  ,  
  useCapture 
  ) 
 

 
  参数值 
 

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

 
  实例 
 

 
  您可以在同一个元素中添加不同类型的事件。 
 

 
  该实例演示了如何在同一个 <button> 元素中添加多个事件： 
 

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

 
  实例 
 

 
  使用可选参数 useCapture 来演示冒泡和捕获阶段的不同: 
 

document.getElementById("myDiv").addEventListener("click", myFunction, true);

 
  实例 
 

 
  使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄: 
 

// 添加 <div> 事件句柄 
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 事件句柄 
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

 
  实例 
 

 
  如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。 
 

 
  以下实例演示了跨浏览器的解决方法： 
 

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

浅析JavaScript事件捕获与事件冒泡

一、什么是事件流？

二、事件冒泡

二、事件捕获

猜你喜欢