JS事件的三個階段以及冒泡和事件物件event
js事件的三個階段分別為：捕獲、目標、冒泡
1.捕獲：事件由頁面元素接收，逐級向下，到具體的元素
2.目標：具體的元素本身
3.冒泡：跟捕獲相反，具體元素本身，逐級向上，到頁面元素
事件捕獲：當使用事件捕獲時，父級元素先觸發，子元素後觸發
事件冒泡：當使用事件冒泡時，子級元素先觸發，父元素後觸發
IE5.5：div---body---document
IE6.0: div---body---html---document
主流瀏覽器:div---body---html---document---window
W3C ： 任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達事件源，再從事件源向上進行事件捕獲
標準瀏覽器：addEventListener("click","doSomething","true")方法,若第三引數為true則採用事件捕獲，若為false，則採用事件冒泡
IE瀏覽器只支援事件冒泡，不支援事件捕獲，所以它不支援addEventListener("click","doSomething","true")方法,所以ie瀏覽器使用ele.attachEvent("onclick",doSomething)
事件傳播的阻止方法：
再W3C中，使用stopPropagation()方法（無論是捕獲階段還是冒泡階段都可以阻止）
在IE下使用cancelBubble = true方法
阻止預設行為：
再W3c中，使用preventDefault（）方法
再IE下return false
每次觸發DOM事件時會產生一個事件物件（也稱event物件），此處的引數e接收事件物件,e為事件物件。而事件物件也有很多屬性和方法，其中target屬性是獲取觸發事件物件的目標，也就是繫結事件的元素，e.target表示該DOM元素，然後在獲取其相應的屬性值。
this和event.target的區別：
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；
.this和event.target都是dom物件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script> <style type="text/css"> *{ padding:0;margin:0; } </style> </head> <body> <div id="parent" style="width:200px;height: 200px;background: blue;"> <div id="son1" style="width:100px;height: 100px;background:red;"></div> <div id="son2" style="width:100px;height:100px;background: yellow;"></div> </div> <script type="text/javascript"> var parent=document.getElementById("parent") var son1=document.getElementById("son1") var son2=document.getElementById("son2") parent.addEventListener("click",function(e){ alert(1) },true) son1.addEventListener("click",function(e){ alert(2) },true) son2.addEventListener("click",function(e){ alert(3) },true) </script> </body> </html>
當引數為true時，為捕獲階段。點選子元素，會從最外面開始觸發，一直到作用事件的元素為止。
當引數為false時，為冒泡階段，點選子元素，從作用事件元素開始，一直觸發到最外面，一般是到window。
如果想阻止捕獲或者冒泡，只需要寫e.stopPropagation()即可。
注意，無論阻止冒泡還是阻止捕獲，都是用e.stopPropagation()
阻止冒泡栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:;" onclick="setCategory(event)" id="testA"></a>
<script type="text/javascript">
function setCategory(e){
//如果提供了事件物件，則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
//因此它支援W3C的stopPropagation()方法
e.stopPropagation();
else
//否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
//或者
var a = document.getElementById("testA");
a.onclick =function(e){
//如果提供了事件物件，則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
//因此它支援W3C的stopPropagation()方法
e.stopPropagation();
else
//否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
</script>
</body>
</html>