詳細(xì)解讀JavaScript的跨瀏覽器事件處理
一.關(guān)于獲取事件對象
FF有點倔強(qiáng)，只支持arguments[0]，不支持window.event。這次真的不怪IE，雖然把event作為window的屬性不合規(guī)范，但大家都已經(jīng)默許這個小問題存在了，只有FF這么多年了還是特立獨行。所以，跨瀏覽器的事件對象獲取有以下兩種方式：
帶參的：
getEvent : function(event){
return event ? event : window.event;
//return event || window.event;//或者更簡單的方式
}
無參的：
function getEvent() {
return arguments[0] ? arguments[0] : window.event;
//return arguments[0] || window.event;//或者更簡單的方式
}
需要特別說明一種方式：HTML的DOM0級方式 + 帶參的事件處理器，如下：
function handler(event){
//do something
}
<!-- HTML的DOM0級方式 -->
<button id="btn" onclick="handler(event);">按鈕</button>
上面這種方式是全瀏覽器兼容的，但依賴HTML的DOM0級方式的缺點很明顯，所以沒能成為像前兩種那樣的主流方法，而JS的DOM0級方式 + 帶參的事件處理器，如下：
function handler(event){
//do something
}
btn.onclick = handler;//JS的DOM0級方式
//btn.onclick = function(event){/*do something*/}//或者匿名函數(shù)，效果同上
這種方式不是全瀏覽器兼容的，[IE8-]不支持，IE9+未知，F(xiàn)F，Chrome支持。一直以為HTML的DOM0級事件處理和JS的DOM0級事件處理是等價的，現(xiàn)在做了很多實驗才發(fā)現(xiàn)二者是有區(qū)別的
二.關(guān)于獲取事件源
event.srcElement是[IE8-]唯一的方式，IE9+未知，其它瀏覽器都支持標(biāo)準(zhǔn)的event.target方式
三.關(guān)于阻止事件默認(rèn)行為
event.preventDefault()是標(biāo)準(zhǔn)方法，但[IE8-]不支持，IE自己的方式是event.returnValue = false;
四.關(guān)于停止事件傳播
event.stopPropagation()是標(biāo)準(zhǔn)方法，IE又有意見了，他要這么玩：event.cancelBubble = true;這里需要特別注意了，因為cancel是屬性而不是方法，與標(biāo)準(zhǔn)相差甚遠(yuǎn)，容易記錯
五.關(guān)于事件處理器的添加和移除
DOM0級方式
ele.onclick = handler;ele.onclick=null;最古老的一種方式
優(yōu)點：全瀏覽器兼容
缺點：同一事件只能綁定/解綁一個事件處理器
DOM2級方式
ele.add/removeEventListener(eventType, handler, catch);
和IE方式：ele.attach/detachEvent(‘on'+eventType, handler);
優(yōu)點：支持綁定/解綁多個事件處理器
缺點：需要做兼容性判斷。需要注意的是：標(biāo)準(zhǔn)方式中最后一個參數(shù)表示是否在事件捕獲階段綁定/解綁，IE不支持事件捕獲，所以也就沒有第三個參數(shù)了
注意：IE方式不僅方法名與標(biāo)準(zhǔn)不同，參數(shù)中事件類型還要加上on，否則綁定無效但不報錯
六.跨瀏覽器的事件處理
//跨瀏覽器的事件處理器添加方式
var EventUtil = {
addHandler : function(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
}
else if(elem.attachEvent){
elem.attachEvent("on" + type, handler);//添加多個同一類型的handler時，IE方式的規(guī)則是最后添加的最先觸發(fā)
}
else{
if(typeof elem["on" + type] === 'function'){
var oldHandler = elem["on" + type];
elem["on" + type] = function(){
oldHandler();
handler();
}
}
else{
elem["on" + type] = handler;//支持添加多個事件處理器
}
}
},
getEvent : function(event){
return event ? event : window.event;
},
getTarget : function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false;
}
},
removeHandler : function(elem, type, handler){
if(elem.removeEventListener){
elem.removeEventListener(type, handler, false);
}
else if(elem.detachEvent){
elem.detachEvent("on" + type, handler);
}
else{
elem["on" + type] = null;//不支持移除單一事件處理器，只能全部移除
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
},
getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}
else if(event.toElement && event.type == "mouseout"){
return event.toElement;
}
else if(event.fromElement && event.type == "mouseover"){
return event.fromElement;
}
else{
return null;
}
},
/*IE8點擊左鍵和中鍵都是0；FF無法識別中鍵；Chrome正常*/
getButton : function(event){//返回0，1，2 - 左，中，右
if(document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
}
else{
switch(event.button){
case 0:case 1:case 3:case 5:case 7:
return 0;
break;
case 2:case 6:
return 2;
break;
case 4:
return 1;
break;
default:
break;
}
}
},
/*只能檢測keypress事件，返回值等于將要顯示的字符編碼*/
/*IE和Chrome只有能顯示的字符鍵才觸發(fā)，F(xiàn)F其它鍵也能觸發(fā)，返回值為0*/
getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}
else{
return event.keyCode;
}
}
};
綜合示例
如果項目中沒有使用諸如 jQuery 之類的庫，如何方便地為元素綁定事件，并兼容各種瀏覽器呢？下面這個簡單的 Utility 應(yīng)該可以考慮。
var eventUtility = {
addEvent : function(el, type, fn) {
if(typeof addEventListener !== "undefined") {
el.addEventListener(type, fn, false);
} else if(typeof attachEvent !== "undefined") {
el.attachEvent("on" + type, fn);
} else {
el["on" + type] = fn;
}
},
removeEvent : function(el, type, fn) {
if(typeof removeEventListener !== "undefined") {
el.removeEventListener(type, fn, false);
} else if(typeof detachEvent !== "undefined") {
el.detachEvent("on" + type, fn);
} else {
el["on" + type] = null;
}
},
getTarget : function(event) {
if(typeof event.target !== "undefined") {
return event.target;
} else {
return event.srcElement;
}
},
preventDefault : function(event) {
if(typeof event.preventDefault !== "undefined") {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
使用方法示例：
var eventHandler = function(evt) {
var target = eventUtility.getTarget(evt),
tagName = target.tagName;
if(evt.type === "click") {
if(tagName === "A" || tagName === "BUTTON") {
alert("You clicked on an A element, and the innerHTML is " + target.innerHTML + "!");
eventUtility.preventDefault(evt);
}
} else if(evt.type === "mouseover" && tagName === "A") {
alert("mouseovered " + target.innerHTML);
}
};
eventUtility.addEvent(document, "click", eventHandler);
eventUtility.addEvent(document, "mouseover", eventHandler);
eventUtility.removeEvent(document, "mouseover", eventHandler);
相關(guān)文章
這篇文章介紹了ES6中函數(shù)的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了詳細(xì)分析JS函數(shù)去抖和節(jié)流相關(guān)知識以及代碼分析，需要的朋友學(xué)習(xí)參考下吧。2017-12-12
當(dāng)代碼在window onload事件被觸發(fā)，且sub函數(shù)被執(zhí)行的時候會發(fā)生什么事情呢？下面我們來一起了解一下2019-05-05
js實現(xiàn)日歷可獲得指定日期周數(shù)及星期幾示例分享(js獲取星期幾)
編寫一個簡易日歷。在文本框中輸入要查找的日期，程序可以計算出這一天處在該年份的第幾周，并且能判斷出這一天到底是星期幾,需要的朋友可以參考下2014-03-03
javascript之函數(shù)直接量(function(){})()
javascript之函數(shù)直接量(function(){})()...2007-06-06
JavaScript parseInt()與Number()區(qū)別案例詳解
這篇文章主要介紹了JavaScript parseInt()與Number()區(qū)別案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
關(guān)于IE BUG與字符串截取substr的解決辦法
本篇文章小編為大家介紹一下，關(guān)于IE BUG與字符串截取substr的解決辦法，有需要的朋友可以參考一下2013-04-04
特殊數(shù)據(jù)的js四舍五入問題...2007-02-02
JavaScript中的字符串也像Python那樣支持反斜杠的轉(zhuǎn)移,并且字符集方面默認(rèn)為Unicode,下面就來詳細(xì)解析JavaScript中的字符串類型與字符編碼支持2016-06-06
這篇文章主要介紹了Typescript中的as、問號與感嘆號詳解,本文分別講述了這幾個關(guān)鍵字的含義作用以及實例,通過文字和代碼的描述,詳細(xì)的表達(dá).以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07