js跨瀏覽器的事件偵聽(tīng)器和事件對(duì)象的使用方法
本文特意為跨瀏覽器實(shí)現(xiàn)添加事件偵聽(tīng)器和跨瀏覽器事件對(duì)象的使用方法做了下總結(jié),并把這些方法打包,歡迎大家學(xué)習(xí)。
打包的一個(gè)EventUtil對(duì)象
var EventUtil = {
// 添加偵聽(tīng)事件
addEventListener:function (element, type, handler) {
// IE9+、Firefox、Safari、chrome和Opera
if(element.addEventListener) {
element.addEventListener(type, handler, false);
}
// IE8-
else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
}
},
// 移除偵聽(tīng)事件
removeEventListener:function (element, type, handler) {
// IE9+、Firefox、Safari、chrome和Opera
if(element.addEventListener) {
element.removeEventListener(type, handler, false);
}
// IE8-
else if(element.attachEvent) {
element.detachEvent("on" + type, handler);
}
},
// 獲取事件對(duì)象
getEvent:function(event) {
if(typeof event == "undefined") {
event = window.event; // IE瀏覽器
}
return event;
},
// 獲取觸發(fā)事件的元素
getTarget:function(event){
if(typeof event.srcElement == "undefined") {
return event.target;
}else {
return event.srcElement; // IE瀏覽器
}
},
// 獲取事件類(lèi)型
getType:function(event) {
return event.type;
},
// 獲取按鍵鍵碼
getCharCode:function(event) {
if(typeof event.keyCode == "number") {
return event.keyCode; // IE8-、Firefox和opera
}else {
return event.charCode;
}
},
// 獲取鼠標(biāo)相對(duì)于文檔的位置,即頁(yè)面坐標(biāo)位置
getPagePosition:function(event) {
var pageX = event.pageX,
pageY = event.pageY;
if(pageX == undefined) {
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY == undefined) {
pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
return {
pageX:pageX,
pageY:pageY
};
},
// 阻止事件的默認(rèn)行為
preventDefault:function(event) {
if(event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false; // IE瀏覽器
}
},
// 阻止事件冒泡
stopPropagation:function(event) {
if(typeof event.cancelBubble == "undefined") {
event.stopPropagation();
}else {
event.cancelBubble = true; // IE瀏覽器
}
}
};
測(cè)試代碼
<div id="box" style="color:red;width: 100%;height:200px;" > <input type="button" value="點(diǎn)擊" id="btn" /> </div> <a id="a">test</a>
var box = document.querySelector("#box");
box.onclick = function(event) {
event = EventUtil.getEvent(event);
alert(EventUtil.getType(event));
alert(EventUtil.getTarget(event));
};
var input = document.querySelector("input");
input.onclick = function(event) {
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
var a = document.getElementById("a");
a.onclick = function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
以上就是跨瀏覽器實(shí)現(xiàn)添加事件偵聽(tīng)器和跨瀏覽器事件對(duì)象的使用方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript移動(dòng)端常用事件之touch觸摸事件詳解
觸屏事件touch也稱(chēng)為觸摸事件,touch對(duì)象代表一個(gè)觸摸點(diǎn),觸摸點(diǎn)可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對(duì)屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動(dòng)端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下2022-10-10
javascript實(shí)現(xiàn)全角與半角字符的轉(zhuǎn)換
這篇文章主要介紹了javascript實(shí)現(xiàn)全角與半角字符的轉(zhuǎn)換的相關(guān)代碼與知識(shí)點(diǎn)分享,需要的朋友可以參考下2015-01-01
js實(shí)現(xiàn)的二級(jí)橫向菜單條實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的二級(jí)橫向菜單條,是非常美觀簡(jiǎn)潔的二級(jí)導(dǎo)航條效果,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的動(dòng)態(tài)響應(yīng)及頁(yè)面樣式切換功能,簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
Textbox控件注冊(cè)回車(chē)事件及觸發(fā)按鈕提交事件具體實(shí)現(xiàn)
Lyncplus客戶端中訪問(wèn)Web頁(yè)面時(shí)遇到了TextBox控件回車(chē)自動(dòng)完成按鈕的提交事件失效的情況,于是上網(wǎng)查找相關(guān)的介紹最終解決了這兩個(gè)問(wèn)題,感興趣的你可以參考下或許對(duì)你有所幫助2013-03-03
JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
JavaScript實(shí)現(xiàn)圖片瀑布流和底部刷新
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片瀑布流和底部刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Bootstrap基本組件學(xué)習(xí)筆記之列表組(11)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之列表組,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹(shù)的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹(shù)的查找算法,結(jié)合具體實(shí)例形式分析了javascript針對(duì)二叉樹(shù)節(jié)點(diǎn)最小值、最大值的相關(guān)查找操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04

