資訊專欄INFORMATION COLUMN
摘要：在事件處理，事件對(duì)象，阻止事件的傳播等方法或?qū)ο蟠嬖谥鵀g覽器兼容性問(wèn)題，開(kāi)發(fā)過(guò)程中最好編寫成一個(gè)通用的事件處理工具。上面的中事件的執(zhí)行都發(fā)生了目標(biāo)階段事件對(duì)象的屬性用來(lái)表示事件處理發(fā)生在事件流哪個(gè)階段。
最近在閱讀javascript高級(jí)程序設(shè)計(jì)，事件這一塊還是有很多東西要學(xué)的，就把一些思考和總結(jié)記錄下。
在事件處理，事件對(duì)象，阻止事件的傳播等方法或?qū)ο蟠嬖谥鵀g覽器兼容性問(wèn)題，開(kāi)發(fā)過(guò)程中最好編寫成一個(gè)通用的事件處理工具。
(function(){
var EU = {};
//...
//在這里添加一些通用的事件處理方法
//...
window.EventUtil = EU;
})();
事件處理程序
事件的綁定主要為IE8以下瀏覽器做兼容處理：
綁定事件IE8以下只支持事件冒泡
IE事件處理使用attachEvent detachEvent
EU.addHandler = function(element,type,handler){
//DOM2級(jí)事件處理，IE9也支持
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
//type加"on"
//IE9也可以這樣綁定
element.attachEvent("on" + type,handler);
}
//DOM0級(jí)事件處理步，事件流也是冒泡
else{
element["on" + type] = handler;
}
};
取消綁定事件
和綁定事件的處理基本一致，有一個(gè)注意點(diǎn)：
傳入的handler必須與綁定事件時(shí)傳入的相同（指向同一個(gè)函數(shù)）
EU.removeHandler = function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler);
}
else if(element.attachEvent){
element.detachEvent("on" + type,handler);
}
else{
//屬性置空就可以
element["on" + type] = null;
}
};
事件對(duì)象
注意點(diǎn)：
IE下event是全局對(duì)象，通過(guò)window.event取得
EU.getEvent = function(event){
return event || window.event;
}
事件的目標(biāo)
注意點(diǎn):
IE下通過(guò)attachEvent綁定事件，內(nèi)部this并非觸發(fā)事件的DOM,而是window;
通過(guò)目標(biāo)對(duì)象來(lái)獲取DOM節(jié)點(diǎn)，IE下是srcElement屬性，等同于其他瀏覽器的target屬性
EU.addTarget = function(event){
return event.target || event.srcElement;
}
阻止默認(rèn)事件
EU.preventDefault = function(event){
if(event.preventDefault){
event.preventDefault();
}
//IE下處理
else{
event.returnValue = false; //默認(rèn)為true
}
}
關(guān)于事件默認(rèn)行為
阻止事件傳播EU.stopPropagation = function(event){
if(event.stopPropagation){
event.stopPropagation();
}
//IE下處理
else{
event.cancelBubble = true;//默認(rèn)為false，注意區(qū)分于returnValue
}
}
注意點(diǎn)：
阻止的是DOM層級(jí)間的事件傳播
比如：對(duì)于一個(gè)DOM元素，同時(shí)綁定捕獲事件與冒泡事件，如果在捕獲階段使用stopPropagation,不會(huì)阻斷冒泡事件的執(zhí)行；(事件捕獲早于事件冒泡)
Demo地址：http://jsfiddle.net/0sfck15b/
如果對(duì)子元素和父元素以冒泡形式都綁定"click"事件，在子元素的事件處理中使用stopPropagation阻止事件傳播,父元素綁定的click事件不會(huì)執(zhí)行。
Demo地址：http://jsfiddle.net/av6yebsw/
上面的劃掉的地方理解有誤，更正下。上面的demo中事件的執(zhí)行都發(fā)生了目標(biāo)階段,事件對(duì)象event的eventPhase屬性用來(lái)表示事件處理發(fā)生在事件流哪個(gè)階段。
對(duì)應(yīng)關(guān)系 1：捕獲階段,2: 處于目標(biāo),3: 冒泡階段
還有一點(diǎn):
目標(biāo)階段并不一定先發(fā)生捕獲階段所綁定的事件,先綁定先執(zhí)行
demo演示： http://jsfiddle.net/h52xwkrh/
但不變的是對(duì)同一個(gè)DOM無(wú)論在捕獲階段還是在冒泡階段使用ev.preventDefault()，都不會(huì)阻止另一個(gè)事件執(zhí)行
歡迎討論交流！如果文章對(duì)你有幫助，點(diǎn)下面的推薦鼓勵(lì)下唄(?>?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/85917.html
摘要：提出的事件流是事件冒泡流，提出的事件流是事件捕獲流。事件冒泡流事件開(kāi)始時(shí)，由最具體的元素文檔中嵌套層次最深的哪個(gè)節(jié)點(diǎn)接收，逐級(jí)上傳到最不具體的元素文檔。事件處理程序，級(jí)事件處理程序，級(jí)事件處理程序，事件處理程序。 事件 綱要 理解事件流 使用事件處理程序 不同的事件類型 javascript和html的交互是通過(guò)事件實(shí)現(xiàn)的。事件就是文檔或?yàn)g覽器窗口發(fā)生的一些特定交互瞬間。可以使用偵...
摘要：本文章需要一些前置知識(shí)事件基礎(chǔ)知識(shí)對(duì)象詳解圍繞著如何更好地實(shí)現(xiàn)一個(gè)跨瀏覽器的事件處理小型庫(kù)展開(kāi)討論。處理垃圾回收過(guò)濾觸發(fā)或刪除一些處理程序解綁特定類型的所有事件克隆事件處理程序依照這樣的一個(gè)思路，我們來(lái)一步步實(shí)現(xiàn)這樣一個(gè)模塊。 本文章需要一些前置知識(shí) 事件基礎(chǔ)知識(shí) event對(duì)象詳解 圍繞著如何更好地實(shí)現(xiàn)一個(gè)跨瀏覽器的事件處理小型庫(kù)展開(kāi)討論。 1. 初步實(shí)現(xiàn) 在《JavaScrip...
摘要：事件流事件流描述的是頁(yè)面接收事件的順序的事件流是冒泡流而的事件流是事件捕獲流事件冒泡是指事件開(kāi)始時(shí)由最具體的元素，然后向上傳播到較為不具體的節(jié)點(diǎn)所有現(xiàn)代瀏覽器都支持事件冒泡則將事件一直冒泡到對(duì)象事件捕獲是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件而具 事件流 事件流描述的是頁(yè)面接收事件的順序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕獲流. 事件冒泡是指...
摘要：一事件流事件流描述的是從頁(yè)面中接受事件的順序。級(jí)事件處理程序級(jí)事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作和。第二個(gè)方法是，它返回事件的目標(biāo)。第三個(gè)方法是，用于取消事件的默認(rèn)行為。首先嘗試使用方法阻止事件流，否則就使用屬性。 一、事件流 事件流描述的是從頁(yè)面中接受事件的順序。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流 1、事件冒泡 事件冒泡，即事件最開(kāi)始...
閱讀 2440·2021-11-22 13:53
閱讀 1134·2021-09-22 16:06
閱讀 1376·2021-09-02 15:21
閱讀 1907·2019-08-30 15:55
閱讀 3127·2019-08-29 11:19
閱讀 1925·2019-08-26 13:23
閱讀 944·2019-08-23 18:23
閱讀 1760·2019-08-23 16:06
