首頁 web前端 js教程 詳解javascript事件冒泡_javascript技巧

詳解javascript事件冒泡_javascript技巧

May 16, 2016 pm 03:20 PM
javascript 事件冒泡

事件是javascript的核心內容之一,在對事件的應用中不可避免的要涉及到一個重要的概念,那就是事件冒泡,在介紹事件冒泡之前,先介紹一下另一個重要的概念事件流:
一.什麼是事件流:
文檔物件模型(DOM)是一個樹狀結構,可以形象的用下圖表示。

如果一個html元素觸發事件,那麼這個事件就會在DOM樹中的觸發節點和根節點之間按照一定的順序傳播,所有經過的節點都會接收到被觸發的事件,這個傳播過程被稱之為事件流。依照事件的傳播順序,可以將其分為兩類,一種是事件冒泡,一種是事件捕獲,這裡就涉及到本章要介紹的主題了:
1.事件冒泡:
所謂的時間冒泡就是當一個元素觸發一個事件,事件會像是水泡一樣,從觸發元素向它的所有父節點傳播,一直到根節點都會接收到此事件,如果父元素中註冊了相應的事件處理函數,那麼儘管事件在子節點觸發的,在父元素上註冊的事件處理函數同樣會被觸發。例如在上面圖示中,如果觸發a元素的onclick事件,那麼它的父元素p、document和widow都會接收到此事件,並且如果在相應的父元素註冊有時間處理函數,那麼此事件處理函數將會執行,看一段程式碼實例:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>
登入後複製

以上程式碼的目的是,點擊對應的儲存格的時候就會彈出對應儲存格中的內容。但在上面的實作中並不是為每個單元格註冊onclick事件處理函數,而是將onclick事件處理函數註冊於單元格的父元素table上,當點擊單元格的時候會觸發onclick事件,事件還會從從事件物件向上傳播,而table元素剛好有註冊的onclick事件處理函數,這個時候就會執行此處理函數,當然這裡會設定到傳遞事件物件參數的問題。所有的瀏覽器都支援事件冒泡。二.事件擷取:
事件捕獲和事件冒泡恰好相反,當點擊一個元素的時候,事件傳播的方向是從根元素到觸發元素,IE瀏覽器並不支持,為了跨瀏覽器支持,所以默認情況下一般都是使用冒泡型事件處理模型。
2.javascript阻止事件冒泡程式碼
事件冒泡在某些場景非常的有用,但是有時候也是必須要阻止,以下是一段能夠兼容所有主流瀏覽器的阻止事件冒泡的實例代碼。
程式碼實例:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}
登入後複製

以上程式碼可以阻止事件冒泡,下面對程式碼做簡單註解:
二、程式碼註解:

  • 1.function stopBubble(e) {},此函數用來阻止事件冒泡,參數為事件物件。
  • 2. if(e&&e.stopPropagation){e.stopPropagation();},判斷是否支援stopPropagation,若支援就使用e.stopPropagation()。 stopPropagation()函數IE10和IE10以下瀏覽器不支援。
  • 3.window.event.cancelBubble=true,目前IE瀏覽器使用這個可以阻止事件冒泡。

以上就是關於javascript事件冒泡的詳細介紹,希望對大家的學習有所幫助。

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

了解事件冒泡機制:為何子元素的點擊會影響父元素的事件? 了解事件冒泡機制:為何子元素的點擊會影響父元素的事件? Jan 13, 2024 pm 02:55 PM

理解事件冒泡:為什麼子元素的點擊會觸發父元素的事件?事件冒泡是指在一個嵌套的元素結構中,當子元素觸發某個事件時,該事件會像冒泡一樣逐層傳遞到父元素,直到最外層的父元素。這種機制使得子元素的事件可以在整個元素樹中傳遞,並依序觸發所有相關的元素。為了更好地理解事件冒泡,讓我們來看一個具體的範例程式碼。 HTML程式碼:<divid="parent&q

jQuery .val()失效的原因及解決方法 jQuery .val()失效的原因及解決方法 Feb 20, 2024 am 09:06 AM

標題:jQuery.val()失效的原因及解決方法在前端開發中,經常會使用jQuery來操作DOM元素,其中.val()方法被廣泛用於獲取和設定表單元素的值。然而,有時候我們會遇到.val()方法失效的情況,導致無法正確取得或設定表單元素的值。本文將探討造成.val()失效的原因,並提供對應的解決方法,同時附上具體的程式碼範例。 1.原因分析.val()方法

事件冒泡為何會觸發兩次? 事件冒泡為何會觸發兩次? Feb 22, 2024 am 09:06 AM

事件冒泡為何會觸發兩次?事件冒泡(EventBubbling)是指在DOM中,當一個元素觸發了某個事件(例如點擊事件),該事件會從該元素開始向上冒泡至父元素,直到冒泡到最頂層的文檔對象為止。事件冒泡是DOM事件模型的一部分,它允許開發者將事件監聽綁定到父元素,從而在子元素觸發事件時,可以透過冒泡機制來捕獲並處理事件。然而,有時開發者會遇到事件冒泡觸發兩次的

js中點擊事件為什麼不能重複執行 js中點擊事件為什麼不能重複執行 May 07, 2024 pm 06:36 PM

JavaScript 中的點擊事件無法重複執行,原因在於事件冒泡機制。為了解決此問題,可以採取以下措施:使用事件擷取:指定事件偵聽器在事件冒泡之前觸發。移交事件:使用 event.stopPropagation() 阻止事件冒泡。使用計時器:在一段時間後再次觸發事件偵聽器。

為何事件冒泡機制會觸發兩次? 為何事件冒泡機制會觸發兩次? Feb 25, 2024 am 09:24 AM

為什麼事件冒泡會連續發生兩次?事件冒泡是web開發中重要的概念,它指的是當一個事件在嵌套的HTML元素中觸發時,事件會從最內層的元素開始一直冒泡到最外層的元素。這個過程有時會引起困惑,其中一個常見問題就是事件冒泡會連續發生兩次。為了更好的理解為什麼事件冒泡會連續發生兩次,我們先來看一段程式碼範例:

哪些JS事件不會往上冒泡? 哪些JS事件不會往上冒泡? Feb 19, 2024 pm 09:56 PM

JS事件中有哪些不會冒泡的狀況?事件冒泡(EventBubbling)是指在觸發了某個元素的事件後,事件會從最內層元素開始沿著DOM樹向上傳遞,直到最外層的元素,這種傳遞方式稱為事件冒泡。但是,並不是所有的事件都能冒泡,有一些特殊情況下事件是不會冒泡的。本文將介紹在JavaScript中有哪些情況下事件不會冒泡。一、使用stopPropagati

vue中的事件修飾符可以用於哪些場景 vue中的事件修飾符可以用於哪些場景 May 09, 2024 pm 02:33 PM

Vue.js 事件修飾符用於新增特定行為,包括:阻止預設行為(.prevent)停止事件冒泡(.stop)一次性事件(.once)擷取事件(.capture)被動的事件監聽(.passive)自適應修飾符(.self)關鍵修飾符(.key)

冒泡事件的常見阻止方法有哪些? 冒泡事件的常見阻止方法有哪些? Feb 19, 2024 pm 10:25 PM

常用的阻止冒泡事件指令有哪些?在Web開發中,我們經常會遇到需要處理事件冒泡的情況。當一個元素上觸發了某個事件,例如點擊事件,它的父級元素也會觸發相同的事件。這種事件傳遞的行為稱為事件冒泡。有時候,我們希望阻止事件冒泡,使事件只在當前元素上觸發,並阻止其向上級元素傳遞。為了實現這個目的,我們可以使用一些常見的阻止冒泡事件的指令。 event.stopPropa

See all articles