[javascript] 看知乎學習js事件觸發過程

時間 2019-11-14

標籤 javascript 學習事件觸發過程欄目 JavaScript 简体版

原文原文鏈接

紅色箭頭表明捕獲階段javascript

藍色表明目標階段java

綠色表明冒泡階段瀏覽器

調用元素對象的addEventListener()方法，參數：事件，回調函數，是否捕獲（true表明捕獲階段，false表明冒泡階段，ie瀏覽器不支持在捕獲階段綁定事件所以通常寫false）函數

<body>
<button id="btn">點擊</button>
<script type="text/javascript">
var btn=document.getElementById("btn");
var eventPhase=["捕獲階段","目標階段","冒泡階段"];

document.body.addEventListener("click",function(event){
    var index=event.eventPhase;
    alert("click處於"+eventPhase[index-1]);//捕獲階段 1
},true);
btn.addEventListener("click",function(event){
    var index=event.eventPhase;
    alert("click處於"+eventPhase[index-1]);//目標階段 2
},true);
document.body.addEventListener("click",function(event){
    var index=event.eventPhase;
    alert("click處於"+eventPhase[index-1]);//冒泡階段 3
});

</script>
</body>

在回調函數中，傳遞進來Event事件對象性能

獲取Event對象的target屬性，表明當前的元素對象this

使用事件代理，給父節點綁定監聽事件，能夠提高性能，能夠減小綁定給每一個子節點spa

中止事件冒泡，調用Event對象的stopPropagation()方法，下降事件的複雜性設計

知乎：javascript的事件處理階段問題?代理

在DOM 2中，事件流有三個階段，事件捕獲階段，處於目標階段和事件冒泡階段。code

var btn=document.getElementById("myBtn");

btn.onclick=function(){

alert("Clicked");

}

以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

var btn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert(this.id);

},false);

以這種方法添加的事件處理程序若是左後一個參數是true，表示在捕獲階段調用事件處理程序，若是是false，表示在冒泡階段調用事件處理程序。

var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){

alert("Clicked");

});

以這種方法添加的事件處理程序都會被添加到冒泡階段。

---------------------------------------------------------------------------------------------------------------

而後event對象都有一個屬性eventPhase，表示調用事件處理程序的階段，屬性的值能夠爲1,2,3,

1. 表示捕獲階段

2. 表示「處於目標」

3. 表示冒泡階段

問題一：當調用這個屬性的時候輸出的結果都是2，何時會出現其餘的結果？

問題二：根據上面的3個例子事件處理程序的在哪一個階段被處理，那麼eventPhase不就是它在哪一個階段被處理的結果？

問題三：不一樣階段處理事件，會有什麼不一樣？有具體的例子嗎？

李力：

問題一：

document.body.addEventListener("click", function(event){

alert(event.eventPhase); // 1 捕獲階段，document.body 上的事件處理程序

}, true);

myBtn.onclick = function(event){

alert(event.eventPhase); // 2 目標上的事件處理程序

}

document.body.onclick = function(event){

alert(event.eventPhase); // 3 冒泡階段，document.body 上的事件處理程序

}

事件流說的是頁面接收事件的順序，而所謂的」冒泡「、」捕獲「是相對於目標元素而言的。

問題二：

「儘管處於目標發生在冒泡階段，但evenPhase仍然一直等於2」。——《JavaScript高級程序設計》。

我在看這部分的時候，以爲挺合理的。既然是目標元素的事件處理程序，固然得在處於目標階段處理事件了啊。

具體爲何我也在找答案，求大神講解。

相關文章

相關標籤/搜索

首發於知乎

Thymeleaf 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<