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