詳解javascript事件冒泡_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事件冒泡的詳細介紹,希望對大家的學習有所幫助。

熱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)

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

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

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

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

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

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

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

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