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