資訊專(zhuān)欄INFORMATION COLUMN
摘要：上個(gè)星期在微博中一個(gè)關(guān)于捕獲和冒泡代碼的討論，可能沒(méi)有動(dòng)手實(shí)現(xiàn)一篇的人無(wú)法給出確定的答案。目標(biāo)階段事件對(duì)象到達(dá)其事件目標(biāo)。在此階段注冊(cè)的事件監(jiān)聽(tīng)器會(huì)對(duì)相應(yīng)的冒泡事件進(jìn)行處理。
上個(gè)星期在微博中一個(gè)關(guān)于javascript捕獲和冒泡代碼的討論，可能沒(méi)有動(dòng)手實(shí)現(xiàn)一篇的人無(wú)法給出確定的答案。
這里再來(lái)回顧一下之前的三條微博。
事件的執(zhí)行順序
JavaScript冒泡和捕獲考察題目看圖回答問(wèn)題，晚上公布答案。
問(wèn)：點(diǎn)擊Li，JS的執(zhí)行順序是什么？
JavaScript捕獲和冒泡探討
總結(jié)就是：先捕獲，后冒泡，捕獲從上到下，冒泡從下到上（形象點(diǎn)說(shuō)法：捕獲像石頭沉入海底，冒泡則像氣泡冒出水面）
問(wèn)：假如去掉注釋 event.stopPropagation(); 結(jié)果又會(huì)輸出什么？
答：去掉event.stopPropagation()
之后，由于事件有捕獲和冒泡時(shí)先執(zhí)行捕獲，捕獲到div之后，事件被阻止，后面就不在繼續(xù)傳播了。所以只輸出divcallback.
在上面的代碼如果增加一個(gè)div.addEventListener("click",callbackdiv2,false);
則div先執(zhí)行捕獲，接著執(zhí)行上面這句冒泡，所以微博里的一個(gè)朋友評(píng)論說(shuō)事件執(zhí)行過(guò)捕獲就不會(huì)執(zhí)行冒泡其實(shí)是不對(duì)的。
div.addEventListener("click",callbackdiv,true);這一句只能是捕獲才執(zhí)行。
以上代碼代碼：演示
事件不同瀏覽器處理函數(shù)
element.addEventListener(type, listener[, useCapture]); // IE6~8不支持（捕獲和冒泡通過(guò)useCapture,默認(rèn)false）
element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持(只執(zhí)行冒泡事件)
element[’on’ + type] = function(){} // 所有瀏覽器（默認(rèn)執(zhí)行冒泡事件）
JavaScript捕獲和冒泡探討
W3C規(guī)范中定義了3個(gè)事件階段，依次是捕獲階段、目標(biāo)階段、冒泡階段。事件對(duì)象按照上圖的傳播路徑依次完成這些階段。如果某個(gè)階段不支持或事件對(duì)象的傳播被終止，那么該階段就會(huì)被跳過(guò)。舉個(gè)例子，如果Event.bubbles屬性被設(shè)置為false，那么冒泡階段就會(huì)被跳過(guò)。如果Event.stopPropagation()在事件派發(fā)前被調(diào)用，那么所有的階段都會(huì)被跳過(guò)。
捕獲 階段：
在事件對(duì)象到達(dá)事件目標(biāo)之前，事件對(duì)象必須從window經(jīng)過(guò)目標(biāo)的祖先節(jié)點(diǎn)傳播到事件目標(biāo)。 這個(gè)階段被我們稱(chēng)之為捕獲階段。在這個(gè)階段注冊(cè)的事件監(jiān)聽(tīng)器在事件到達(dá)其目標(biāo)前必須先處理事件。
目標(biāo) 階段：
事件對(duì)象到達(dá)其事件目標(biāo)。 這個(gè)階段被我們稱(chēng)為目標(biāo)階段。一旦事件對(duì)象到達(dá)事件目標(biāo)，該階段的事件監(jiān)聽(tīng)器就要對(duì)它進(jìn)行處理。如果一個(gè)事件對(duì)象類(lèi)型被標(biāo)志為不能冒泡。那么對(duì)應(yīng)的事件對(duì)象在到達(dá)此階段時(shí)就會(huì)終止傳播。
冒泡 階段：
事件對(duì)象以一個(gè)與捕獲階段相反的方向從事件目標(biāo)傳播經(jīng)過(guò)其祖先節(jié)點(diǎn)傳播到window。這個(gè)階段被稱(chēng)之為冒泡階段。在此階段注冊(cè)的事件監(jiān)聽(tīng)器會(huì)對(duì)相應(yīng)的冒泡事件進(jìn)行處理。
在一個(gè)事件完成了所有階段的傳播路徑后，它的Event.currentTarget會(huì)被設(shè)置為null并且Event.eventPhase會(huì)被設(shè)為0。Event的所有其他屬性都不會(huì)改變（包括指向事件目標(biāo)的Event.target屬性）.
跨瀏覽器的事件處理函數(shù)：
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) { // DOM2
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { // IE
element.attachEvent("on" + type, handler);
} else { // DOM0
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
跨瀏覽器的事件對(duì)象：
var EventUtil = {
getEvent: function(e) {
return e ? e : window.e;
},
getTarget: function(e) {
return e.target || e.srcElement;
},
preventDefault: function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
stopPropagation: function(e) {
if (e.stopPropagation) {
e.stopPropagation()
} else {
e.cancelBubble = true;
}
}
}
可以看我之前寫(xiě)過(guò)的一篇文章：如何停止冒泡和阻止默認(rèn)行為
ps:半個(gè)月沒(méi)發(fā)文章，因?yàn)槲易罱诟氵@個(gè)：開(kāi)發(fā)頭條網(wǎng)，然后我發(fā)現(xiàn)這個(gè)東西做好和做壞根本沒(méi)有出路，我考慮要不要下掉，嗚嗚……，請(qǐng)賜予我動(dòng)力吧。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79254.html
摘要：要想注冊(cè)過(guò)的事件能夠被解除，必須將回調(diào)函數(shù)保存起來(lái)，否則無(wú)法解除。當(dāng)用阻止瀏覽器的默認(rèn)行為時(shí)，會(huì)做下面這件事停止回調(diào)函數(shù)執(zhí)行并立即返回。 showImg(https://segmentfault.com/img/bVboOcb?w=750&h=422); 前言 這是前端面試題系列的第 7 篇，你可能錯(cuò)過(guò)了前面的篇章，可以在這里找到： 理解函數(shù)的柯里化 ES6 中箭頭函數(shù)的用法 thi...
摘要：主題來(lái)自于的典型面試問(wèn)題列表。有多種方法來(lái)處理事件委托。這種方法的缺點(diǎn)是父容器的偵聽(tīng)器可能需要檢查事件來(lái)選擇正確的操作，而元素本身不會(huì)是一個(gè)監(jiān)聽(tīng)器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...
摘要：事件處理程序事件偵聽(tīng)器的設(shè)定級(jí)級(jí)首先講級(jí)事件處理程序?qū)κ录姆绞奖环Q(chēng)為事件處理程序或事件偵聽(tīng)器，但這兩者之間是有區(qū)別的。此外，不能對(duì)事件目標(biāo)事件類(lèi)型執(zhí)行階段都相同的對(duì)象注冊(cè)多個(gè)相同的事件偵聽(tīng)器。 關(guān)于這一篇章有太多對(duì)于我來(lái)說(shuō)雜且亂的知識(shí)點(diǎn)，單單是分別DOM層級(jí)劃分我看過(guò)的文章就有（0,2,3）的，（0,2）的，由于自己知識(shí)掌握還很薄弱所以只能參考別人文章結(jié)合自己理解來(lái)寫(xiě)，這其中也涉及到...
摘要：在內(nèi)聯(lián)模型中，事件處理函數(shù)是標(biāo)簽的一個(gè)屬性，用于處理指定事件。事件捕獲與冒泡原理圖事件流同時(shí)支持兩種事件模型捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。 javascript -- 事件 事件是js和用戶(hù)操作交互的橋梁, JavaScript 有三種事件模型：內(nèi)聯(lián)模型、腳本模型和 DOM2 模型 內(nèi)聯(lián)模型 這種模型是最傳統(tǒng)接單的一種處理事件的方法。在內(nèi)聯(lián)模型中，事件處理函數(shù)是 HT...
閱讀 576·2021-11-18 10:02
閱讀 1060·2021-11-02 14:41
閱讀 689·2021-09-03 10:29
閱讀 1902·2021-08-23 09:42
閱讀 2744·2021-08-12 13:31
閱讀 1209·2019-08-30 15:54
閱讀 1963·2019-08-30 13:09
閱讀 1437·2019-08-30 10:55
