摘要:一旦事件處理程序執行完成,對象就會被銷毀。所有瀏覽器對的支持方式包括事件對象和事件對象。無論指定事件處理程序時使用什么方法級或級,都會傳入對象。由于不支持事件捕獲,因而只能取消事件冒泡但可以同時取消事件捕獲和冒泡。
0 Event Object導論
支持DOM0、DOM2的瀏覽器和IE瀏覽器實現事件處理程序的不同,除了體現在添加事件處理程序的不同上,還體現在event對象的實現差異上,包括具體的屬性和方法。
在觸發DOM上的某個事件時,都會產生一個event對象,這個對象包含著所有與事件有關的信息。一旦事件處理程序執行完成,event對象就會被銷毀。所有瀏覽器對event的支持方式包括:DOM事件對象和IE事件對象。
兼容 DOM 的瀏覽器會將一個 event 對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法(DOM0 級或 DOM2 級) ,都會傳入 event 對象。
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(event.type); //"click" }; btn.addEventListener("click", function(event){ alert(event.type); //"click" }, false);
在通過 HTML 特性指定事件處理程序時,變量 event 中保存著 event 對象:
1.2 event對象常用屬性和方法
(1) type, String; 只讀; 被觸發的事件的類型,如click。
(2) currentTarget, Element,只讀,其事件處理程序當前正在處理事件的那個元素;
(3) target, Element, 只讀, 事件的目標;
在事件處理程序內部,對象 this 始終等于 currentTarget 的值(注冊事件處理程序的元素),而 target 則只包含事件的實際目標(事件直接觸發的元素)。如果直接將事件處理程序指定給了目標元素,則 this、 currentTarget 和 target 包含相同的值。但是考慮到有時候會使用事件冒泡機制,事件直接觸發的元素不一定是事件綁定的元素,例如:
//按鈕在body中,事件會冒泡到body document.body.onclick = function(event){ alert(event.currentTarget === document.body); //true alert(this === document.body); //true alert(event.target === document.getElementById("myBtn")); //true };
當單擊這個例子中的按鈕時, this 和 currentTarget 都等于 document.body,因為事件處理程序是注冊到這個元素上的。然而, target 元素卻等于按鈕元素,因為它是 click 事件真正的目標。由于按鈕上并沒有注冊事件處理程序,結果 click 事件就冒泡到了 document.body,在那里事件才得到了處理。
(4) preventDefault()方法:阻止特定事件的默認行為。例如,鏈接的默認行為就是在被單擊時會導航到其 href 特性指定的 URL。
var link = document.getElementById("myLink"); link.onclick = function(event){ event.preventDefault(); };
(5) stopPropagation()方法:用于立即停止事件在 DOM 層次中的傳播,即取消進一步的事件捕獲或冒泡。這個屬性在jQuery中很重要。
(6) eventPhase 屬性:可以用來確定事件當前正位于事件流的哪個階段。如果是在捕獲階段調用的事件處理程序,那么 eventPhase 等于 1;如果事件處理程序處于目標對象(直接點擊對象,一般是最內層對象)上,則 eventPhase 等于 2;如果是在冒泡階段調用的事件處理程序, eventPhase 等于 3。這里要注意的是,盡管“處于目標”發生在冒泡階段,但 eventPhase 仍然一直等于 2。
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(event.eventPhase); //2 ,最內元素在事件傳播結束后觸發 }; document.body.addEventListener("click", function(event){ alert(event.eventPhase); //1,DOM2事件觸發使用true參數是在傳播階段觸發 }, true); document.body.onclick = function(event){ alert(event.eventPhase); //3,DOM0事件在冒泡階段觸發 };
當單擊這個例子中的按鈕時,首先執行的事件處理程序是在捕獲階段觸發的添加到 document.body中的那一個,結果會彈出一個警告框顯示表示 eventPhase 的 1。接著,會觸發在按鈕上注冊的事件處理程序,此時的 eventPhase 值為 2。最后一個被觸發的事件處理程序,是在冒泡階段執行的添加到document.body 上的那一個,顯示 eventPhase 的值為 3。而當 eventPhase 等于 2 時,this、target和 currentTarget 始終都是相等的。
2.1 IE中的事件對象IE中event對象的訪問方式取決于綁定事件處理程序的方法:
1)DOM0級方法: event對象作為window對象的一個屬性存在。
var btn = document.getElementById("myBtn"); btn.onclick = function(){ var event = window.event; alert(event.type); //"click" };
2)如果事件處理程序是通過attachEvent()添加的,就有一個event對象作為事件處理程序的參數。
var btn = document.getElementById("myBtn"); alert(typeof attachEvent); btn. attachEvent("click", function(event){ alert(event.type); //"click" });2.2 IE中event對象的屬性和方法
1)cancelBubble:默認值為false,但將其設置為true就可以取消事件冒泡(與DOM中
的stopPropagation()方法的作用相同);
2)returnValue:默認值為true,但將其設置為false就可以取消事件的默認行為(與
DOM中的preventDefault()方法的作用相同);
3)srcElement:事件的直接目標(與DOM中的target屬性相同);
4)type:被觸發的事件的類型。
srcElement:因為事件處理程序的作用域是根據指定它的方式來確定的, this 不一定總是等于事件目標。例如:
var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(window.event.srcElement === this); //DOM0級方法,true }; btn.attachEvent("onclick", function(event){ alert(event.srcElement === this); //false });
returnValue 屬性:只要將 returnValue 設置為 false,就可以阻止默認行為。
var link = document.getElementById("myLink"); link.onclick = function(){ window.event.returnValue = false; };
cancelBubble 屬性:與 DOM 中的 stopPropagation()方法作用相同,都是用來停止事件冒泡的。由于 IE 不支持事件捕獲,因而只能取消事件冒泡;但 stopPropagatioin()可以同時取消事件捕獲和冒泡。例如:
//在單擊按鈕之后,只會顯示一個警告框。 var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("Clicked"); window.event.cancelBubble = true; }; document.body.onclick = function(){ alert("Body clicked"); };2.3 IE11的變化
但是在IE11發布之后attachEvent函數被替換成了addEventListener。
var btn = document.getElementById("myBtn"); alert(typeof addEventListener);//function btn.addEventListener("click", function(event){ alert(event.type); //"click" });
IE11中srcElement屬性測試:
HTML:
the onlt one div
JavaScript:
var wrapper = document.getElementById("wrapper"); alert(typeof addEventListener); wrapper.addEventListener("click", function(event){ alert(event.target); //span alert(event.currentTarget); //div alert(event.srcElement); //span alert(this);//div });
結論:srcElement和target是相同的,都指向事件的直接元素,但是this和currentTarget都指向事件綁定元素。
如果需要阻止默認行為,直接使用在addEventListener()中使用event.preventDefault()即可。根據以上,可以得出初步的結論:在IE11瀏覽器中使用addEventListener()后,DOM2級event具有的屬性和方法都可以使用。
我在IE中使用addEventListener()并沒有遇到問題,但是網上有一些開發者在使用時會遇到問題,提供的解決方法有數種:
https://social.msdn.microsoft...
第一種是加入一些腳本:
第二種是把IE的internet選項-- >安全,點擊“將所有區域重置為默認級別”。
3 跨瀏覽器的事件對象EventUtilvar EventUtil = { //是否支持DOM2?是否是IE?是否支持DOM0?一般前兩個if包含了所有情況 addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, //IE沒有event對象,因此使用window.event getEvent: function(event){ return event ? event : window.event; }, /*使用getEvent()方法得到event對象后才可以使用getTarget()、 preventDefault()、stopPropagation()方法 */ //先檢測DOM0 DOM2的target屬性,然后檢測IE的srcElement屬性 getTarget: function(event){ return event.target || event.srcElement; }, //先檢測DOM0 DOM2的preventDefault(),再檢測IE的returnValue preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } }, //是否支持DOM2?是否是IE?是否支持DOM0?一般前兩個if包含了所有情況 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; } }, //先檢測DOM0 DOM2的stopPropagation(),再檢測IE的cancelBubble stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble = true; } } };
測試實例:
var but = document.getElementById("myButtun"); var handler = function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); alert(target);// [object HTMLInputElement] }; EventUtil.addHandler(but, "click", handler);
當然,上述跨瀏覽器的事件對象所包含的屬性和方法并不是必須的,在實際中可以根據實際情況適當刪減一些屬性和方法。但是,萬變不離其宗。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80617.html
Thoughts Recently I have been reading the book Async Javascript about JS asynchronicity and JS event is one of the useful solutions to the problem. To get a deeper understanding of how events work, I ...
摘要:當調用時,會觸發當前類的魔術方法,通過判斷屬性中索引是否存在,不存在拋出異常,存在就通過去實例化初始化時設置的,這里是工廠模式,接下來的路由文章會詳細分析。在操作中,會將前置操作設置到類的屬性中。微框架源碼閱讀系列 在自動加載實現完成后,接著new flightEngine()自動加載的方式實例化了下框架的核心類Engine,這個類名翻譯過來就是引擎發動機的意思,是flight的引擎發...
摘要:編寫函數編寫函數推薦使用這個,控制臺中的函數編寫堪稱讓人痛不欲生。在控制臺中安裝在中引入包后會一起打包上傳到運行時中。 Amazon Web Services(AWS) 雖然作為市場份額全球第一的云計算廠商,其產品也不是完美無缺的,Cognito (AWS 的身份認證解決方案)及其附帶的中文文檔就是一個反面教材,其難用程度令人發指。當然,除了不易用之外,還有訪問速度緩慢,不適用于中國市...
Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...
閱讀 2925·2023-04-26 02:22
閱讀 2286·2021-11-17 09:33
閱讀 3127·2021-09-22 16:06
閱讀 1062·2021-09-22 15:54
閱讀 3530·2019-08-29 13:44
閱讀 1905·2019-08-29 12:37
閱讀 1316·2019-08-26 14:04
閱讀 1905·2019-08-26 11:57