最近在閱讀javascript高級程序設計
,事件這一塊仍是有不少東西要學的,就把一些思考和總結記錄下。
在事件處理,事件對象,阻止事件的傳播等方法或對象存在着瀏覽器兼容性問題,開發過程當中最好編寫成一個通用的事件處理工具。javascript
(function(){ var EU = {}; //... //在這裏添加一些通用的事件處理方法 //... window.EventUtil = EU; })();
事件的綁定主要爲IE8如下瀏覽器作兼容處理:java
IE8如下只支持事件冒泡
IE事件處理使用attachEvent
detachEvent
segmentfault
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
取得this
EU.getEvent = function(event){ return event || window.event; }
注意點:.net
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 } }
關於事件默認行爲code
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(),都不會阻止另外一個事件執行
歡迎討論交流!若是文章對你有幫助,點下面的推薦鼓勵下唄(๑><๑)