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

什麼是事件？

什麼是事件流：

#DOM事件流

DOM2級事件處理程序

阻止事件冒泡

阻止預設事件

首頁

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7817

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。