徹底弄懂JS的事件冒泡和事件捕獲
事件冒泡階段:事件從事件目標(target)開始,往上冒泡直到頁面的最上一級標籤。 假設一個元素div,它有一個下級元素p。 <div> <p>元素</p> </div> 這兩個元素都綁定了click事件,如果使用者點選了p,它在div和p上都觸發了click事件,那這兩個事件處理程式哪個先執行呢?事件順序是什麼? 兩種模型 以前,Netscape和Microsoft是不同的實現方式。 Netscape中,div先觸發,這就叫做事件捕獲。 Microsoft中,p先觸發,這就叫做事件冒泡。 兩種事件處理順序剛好相反。IE只支援事件冒泡,Mozilla, Opera 7 和 Konqueror兩種都支援,舊版本的Opera's 和 iCab兩種都不支援 。 事件捕獲 當你使用事件捕獲時,父級元素先觸發,子級元素後觸發,即div先觸發,p後觸發。 事件冒泡 當你使用事件冒泡時,子級元素先觸發,父級元素後觸發,即p先觸發,div後觸發。 W3C模型 W3C模型是將兩者進行中和,在W3C模型中,任何事件發生時,先從頂層開始進行事件捕獲,直到事件觸發到達了事件源元素。然後,再從事件源往上進行事件冒泡,直到到達document。 程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡,方法就是繫結事件時通過addEventListener函式,它有三個引數,第三個引數若是true,則表示採用事件捕獲,若是false,則表示採用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕獲 false=冒泡 傳統繫結事件方式 在一個支援W3C DOM的瀏覽器中,像這樣一般的繫結事件方式,是採用的事件冒泡方式。 ele.onclick = doSomething2 IE瀏覽器 如上面所說,IE只支援事件冒泡,不支援事件捕獲,它也不支援addEventListener函式,不會用第三個引數來表示是冒泡還是捕獲,它提供了另一個函式attachEvent。 ele.attachEvent("onclick", doSomething2); 附:事件冒泡(的過程):事件從發生的目標(event.srcElement||event.target)開始,沿著文件逐層向上冒泡,到document為止。 事件的傳播是可以阻止的: • 在W3c中,使用stopPropagation()方法 • 在IE下設定cancelBubble = true; 在捕獲的過程中stopPropagation();後,後面的冒泡過程也不會發生了~ 3.阻止事件的預設行為,例如click <a>後的跳轉~ • 在W3c中,使用preventDefault()方法; • 在IE下設定window.event.returnValue = false;
在學校,聽老師講解事件冒泡和事件捕獲機制的時候跟聽天書一樣,只依稀記得IE使用的是事件冒泡,其他瀏覽器則是事件捕獲。當時的我,把它當成IE瀏覽器相容問題,所以沒有深究(IE8以下版本的瀏覽器已基本退出市場)。工作至今,雖然多次遇到該類問題,但均未深究,始終一知半解,遇到了全TM靠猜(選A不行就選B唄)。今天閒來無事自己做了個demo,算是把這個問題徹底搞明白了。
先上結論:他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數,就是控制事件觸發順序是否為事件捕獲。true,事件捕獲;false,事件冒泡。預設false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡,意思就是到我為止,我的爹和祖宗的事件就不要觸發了。
這是HTML結構
<div id="parent">
<div id="child" class="child"></div>
</div>
現在我們給它們繫結上事件
document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被觸發,"+this.id); }) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被觸發,"+this.id) })
結果:
child事件被觸發,child
parent事件被觸發,parent
結論:先child,然後parent。事件的觸發順序自內向外,這就是事件冒泡。
現在改變第三個引數的值為true
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被觸發,"+e.target.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被觸發,"+e.target.id)
},true)
結果:
parent事件被觸發,parent
child事件被觸發,child
結論:先parent,然後child。事件觸發順序變更為自外向內,這就是事件捕獲。
貌似沒什麼卵用,上一個利用事件冒泡的案例,反正我是經常會用到。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
需求是這樣的:滑鼠放到li上對應的li背景變灰。
利用事件冒泡實現:
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
也許有人會說,我們直接給所有li都綁上事件也可以啊,一點也不麻煩,只要……
$("li").on("mouseover",function(){
$(this).css("background-color","#ddd").siblings().css("background-color","white");
})
是,這樣也行。而且從程式碼簡潔程度上,兩者是相若彷彿的。但是,前者少了一個遍歷所有li節點的操作,所以在效能上肯定是更優的。
還有就是,如果我們在繫結事件完成後,頁面又動態的載入了一些元素……
$("<li>item7</li>").appendTo("ul");
這時候,第二種方案,由於繫結事件的時候item7還不存在,所以為了效果,我們還要給它再繫結一次事件。而利用冒泡方案由於是給ul綁的事件……
高下立判!
相關推薦
徹底弄懂JS的事件冒泡和事件捕獲
事件冒泡階段:事件從事件目標(target)開始,往上冒泡直到頁面的最上一級標籤。 假設一個元素div,它有一個下級元素p。 <div> <p>元素</p> </div> 這兩個元素都綁定了click事件,如果使用者點
終於弄懂了事件冒泡和事件捕獲!
總結了兩個人的部落格,寫了這篇:總算是搞清楚事件捕獲和事件冒泡了! 參考資料淺談事件冒泡與事件捕獲 理解事件捕獲和事件冒泡 1、事件捕獲 捕獲型事件(event capturing):事件從最不精確的物件(document 物件)開始觸發,然後到最精確(也可以在視窗級別
js的事件冒泡和事件捕獲
use 應用 ges color mouse 冒泡 code 元素事件 三個參數 一、定義 事件捕獲:從document到觸發事件的那個節點,自上而下觸發事件; 事件冒泡:從觸發事件節點依次向上觸發事件,直到document。 原聲js中,綁定事件方法addEventLis
js之事件冒泡和事件捕獲詳細介紹
1-1 ppr lang strong 傳播 默認 ont 也不會 element (1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。 IE 5.5: div -> body -> document
JS事件冒泡和事件捕獲
border 綁定 tab 現在 cells 一次 tel 加載 adding 他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數,就是控制事件觸發
JS高階:事件冒泡和事件捕獲;
1、事件:瀏覽器客戶端上客戶觸發的行為成為時事件;所有的事件都是天生自帶的,不需要我們去繫結,只需要我們去觸發 當用戶觸發一個事件時,瀏覽器的所有詳細資訊都存在一個叫做event的物件上,我們把它叫做事件物件 2、獲取滑鼠的座標 event.clientX;event.clientY document
JS中的事件冒泡和事件捕獲
談起JavaScript的 事件,事件冒泡、事件捕獲、阻止預設事件這三個話題,無論是面試還是在平時的工作中,都很難避免。 事件捕獲階段:事件從最上一級標籤開始往下查詢,直到捕獲到事件目標(target
JS事件流(事件冒泡和事件捕獲)
事件流是描述從頁面接收事件的順序。但是有意思的是,IE和Netscape開發團隊提出了差不多完全相反的事件流概念。IE的事件流是事件冒泡流,而Netspace Communicator的事件流是事件捕獲流。 事件冒泡 IE的事件流叫做事件冒泡(event
js 事件流的事件冒泡和事件捕獲與阻止事件傳播
head 阻止事件冒泡 觸發 事件冒泡 單擊 期望 就會 簡單的 出現異常 為了方便引入事件流的概念,我們先來說說什麽是事件。 事件就是用戶或瀏覽器自身執行的某種動作。換句話說,我們在瀏覽網頁或者 APP 時,通常會在設備上產生很多交互性的操作,例如點擊、選擇、滾動屏幕、鍵
JS 事件冒泡和事件捕獲
寫在前面 W3C規定DOM事件流(event flow )存在三個階段:事件捕獲階段、處於目標階段、事件冒泡階段。dom標準事件流的觸發的先後順序為:先捕獲再冒泡,即當觸發dom事件時,會先進行事件捕獲,捕獲到事件源之後通過事件傳播進行事件冒泡。 對事件冒泡和捕捉的解釋 事件冒泡 在本示例中,當我們點選孫
阻止事件冒泡和事件默認行為
pre function 防止 處理 true 停止 jquery 事件 val 阻止事件冒泡(兼容IE8) function stopHandler(event){ window.event?window.event.cancelBubble=true:even
關於事件流,事件冒泡和事件捕獲
有意 clas 向上 接收 上傳 單擊事件 sca dom 描述 1.事件流 假設有這樣一個場景: 有一個導航條:div > ul > li > a,每個元素塊寬高一樣,就像是一組同心圓。如果我們點擊a元素,那麽瀏覽器會認為單擊事件不僅僅發生在a上。換
DOM事件機制(事件捕獲和事件冒泡和事件委托)
使用 tar web strong 事件 所有 span click ner 內容: 1.事件復習 2.事件冒泡與事件捕獲 3.事件委托 1.事件復習 (1)事件 事件是用來處理響應的一個機制,這個響應可以來自於用戶(點擊, 鼠標移動, 滾動), 也可以來自於瀏
事件冒泡和事件捕獲
pad http eve class click true blue on() 寫法 事件冒泡有空補充(印象筆記裏) 事件捕獲 瀏覽器默認,由裏向外逐漸觸發事件,這種行為叫做事件冒泡。 利用事件監聽可以使瀏覽器,由外向裏逐漸觸發事件,這種行為叫做事件捕獲。
事件流:事件冒泡和事件捕獲
top 選擇器 itl listener doc 三個參數 NPU 默認 捕獲 事件流:事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。, element.addEventListener(event,fu
事件,事件冒泡和事件捕獲
1.事件 瀏覽器客戶端上客戶觸發的行為都稱為事件 所有的事件都是天生自帶的,不需要我們去繫結,只需要我們去觸發。 通過obj.事件名=function(){} 事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick&n
徹底弄懂JS原型與繼承
本文由淺到深,循序漸進的將原型與繼承的抽象概念形象化,且每個知識點都搭配相應的例子,儘可能的將其通俗化,而且本文最大的優點就是:長(為了更詳細嘛)。 一、原型 首先,我們先說說原型,但說到原型就得從函式說起,因為原型物件就是指函式所擁有的prototype屬性(所以下文有時說原型,有時說prototype
JavaScript 事件冒泡和事件捕捉
含義 事件冒泡 事件的觸發順序為,由內而外。直到文件最頂層(document或window)。 事件捕捉 事件的觸發順序為,由外而內。 任何發生在w3c事件模型中的事件,首是進入捕獲階段,直到達到目標元素,再進入冒泡階段。 //使用事件捕捉模式 element1.
【事件流】事件冒泡和事件捕獲
事件流: 通俗的說就是:元素觸發時,傳播的過程。 冒泡型事件流:事件的傳播是從最具體的事件目標到最不具體的事件目標。即從DOM樹的葉子到根。 <div>—》<body>—》<html>—》document &n
javascript-阻止事件冒泡和事件預設行為
1.事件冒泡 (1-1)冒泡是什麼? 事件冒泡就像熱水沸騰時產生汽泡往上升的情形一樣(往上傳遞的過程),事件冒泡出現的情況:假設一個html結構中兩個標籤存在父子層級關係,父盒子和子盒子都繫結一個相