【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲
- php是最好的语言原創
- 2018-08-02 09:13:262091瀏覽
什麼是事件？
事件是文件和瀏覽器視窗中發生的特定互動的瞬間。
什麼是事件流：
事件流描述的是從頁面中接受事件的順序，但有趣的是，微軟（IE）和網景（Netscape ）開發團隊居然提出了兩個相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕獲流(event capturing)。
第一種：事件冒泡
IE提出的事件流叫做事件冒泡，即事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點
p——>body——>html——>document
第二種：事件捕獲
不太具體的節點應該更早接收到事件，最具體的節點應該最後接收到事件。捕獲的目的在於在事件到達預定目標之前捕獲它。
document——>html——>body——>p
#DOM事件流
「DOM2級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段、事件冒泡階段
在DOM事件流中，實際的目標在捕獲階段不會接受到事件，這意味著在捕獲階段，事件到達body後就停止了。下一個階段是處於目標階段，於是事件在p上發生，並在事件處理中被視為冒泡階段的一部分。然後，冒泡階段發生，事件又傳回文件。
即使「DOM2級事件」規範明確要求擷取階段不會涉及事件目標，但現在的主流瀏覽器都會在擷取階段觸發事件物件上的事件。結果就是有兩個機會在目標物件上面操作事件。
DOM2級事件處理程序
DOM 2級事件定義了兩方法：用於處理新增事件和刪除事件的操作：
新增事件addEventListener() 刪除事件 removeEventListener()
所有DOM節點中都包含這兩個方法，並且他們都包含3個參數： （1） 要處理的事件方式（例如：click，mouseover,dbclick.....） （2）事件處理的函數，可以為匿名函數，也可以為命名函數（但如果需要刪除事件，必須是命名函數） （3）一個布林值，代表是處於事件冒泡階段處理還是事件擷取階段（true：表示在擷取階段呼叫事件處理程序；false:表示在冒泡階段呼叫事件處理程序）
//这是一个DOM 2级事件 添加事件最简单的方式（此时添加的是一个匿名函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
console.log('我是按钮')
},false) //当第三个参数不写时，也是默认为false（冒泡时添加事件）
</script>
</body>
</html>//添加的函数是命名函数，removeEventListener需要用这种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',foo,false);
function foo(){
console.log('我是按钮')
}
//其实操作就是把写在里面的函数拿到了外面，而在原来的位置用函数名来代替
</script>
</body>
</html>DOM2級處理程序也支援新增兩個事件處理事件，那麼兩個事件都會執行
大多數情況下，我們都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器。
最好只在需要在事件到達目標之前截獲它的時候，將事件處理程序新增到擷取階段。
如果不是特別需要，不建議在事件擷取階段註冊事件處理程序。
阻止事件冒泡
主要是用來阻止事件傳播。阻止它被分派到其他的DOM節點上，在事件傳播的任何階段都能使用。使用方法如下（相容IE）：
function stopBubble(event){
if(window.event){
//兼容IE
window.event.cancelBubble=true;
}else{
event.stopPropagation();
}
}阻止預設事件
function stopDefaultEvent(event){
if(window.event){
//兼容IE
window.event.returnValue=false;
}else{
event.preventDefault()
}
return false;
}相關文章：
相關影片：
以上是【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲的詳細內容。更多資訊請關注PHP中文網其他相關文章！