【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲-js教程-PHP中文網

首頁

web前端

js教程

【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲

php是最好的语言

Aug 02, 2018 am 09:13 AM

什麼是事件？

　　事件是文件和瀏覽器視窗中發生的特定互動的瞬間。

什麼是事件流：

事件流描述的是從頁面中接受事件的順序，但有趣的是，微軟（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(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,function(){
            console.log(&#39;我是按钮&#39;)
        },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(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,foo,false);
        function foo(){
            console.log(&#39;我是按钮&#39;)
        }
           //其实操作就是把写在里面的函数拿到了外面，而在原来的位置用函数名来代替
    </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;
}

JS冒泡事件與事件擷取實例詳解

JavaSript事件冒泡和事件擷取如何實作

相關影片：

JS抽象類別和事件設計模式影片教學

以上是【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。