javascript 兼容各個(gè)瀏覽器的事件

調(diào)用事件:

事件對象
什么是事件對象?在觸發(fā)dom上的事件是都會產(chǎn)生一個(gè)事件對象event。例如鼠標(biāo)點(diǎn)擊的時(shí)候,自己就會產(chǎn)生比如點(diǎn)擊的類型啊 還要那個(gè)元素發(fā)出的
dom 事件對象 type 屬性用于獲取事件對象, target屬性 用于獲取事件目標(biāo),stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默認(rèn)行為
IE中的事件對象 type 屬性 用于獲取事件對象, srcElement屬性 用于獲取事件目標(biāo) cancelBubble屬性 用于阻止事件冒泡 設(shè)置為true是表示阻止 false表示不阻止
returnValue 屬性 用于阻止事件的默認(rèn)行為 設(shè)置為false的時(shí)候表示阻止

// 兼容各個(gè)瀏覽器 跨瀏覽器事件處理------- 統(tǒng)一進(jìn)行封裝
var EventHandle = {
// element : 元素 , type: 點(diǎn)擊事件 ,handle : 實(shí)行的方法
//添加句柄
addEventHandle: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);//---false //代表冒泡 dom2級
}
else if (element.attachEvent) {
element.attachEvent("on"+type, handler);
} else {
element["on" + type] = handler;
}
},
//刪除句柄 事件處理不起作用
removeEventHandle: function (element, type, handler) {
if (element.removeEventListener) { // 支持dom2級的事件處理 type是 onclick
element.removeEventListener(type, handler, false); //---false //代表冒泡
}
else if (element.detachEvent) {
element.detachEvent("on"+type, handler); //支持IE
} else {
element["on" + type] = null;// dom0級事件處理 傳統(tǒng)的點(diǎn)擊事件
}
},
//獲取事件對象 兼容瀏覽器的所有對象
getEvent: function (event) {
return event ? event : window.event; //在IE瀏覽器的低版本中需要的是window.event
},
//獲取事件類型 是點(diǎn)擊呢還是鼠標(biāo)移動
getType:function(event){
return event.type;
},
//獲取當(dāng)前的那個(gè)元素
getElement: function (event) {
return event.target || event.srcElement;
},
//阻止事件的默認(rèn)行為
: function (event) {
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
}
- JS事件添加和移出的兼容寫法示例
- 兼容各大瀏覽器的JavaScript阻止事件冒泡代碼
- 純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
- 原生JS綁定滑輪滾動事件兼容常見瀏覽器
- javascript瀏覽器兼容教程之事件處理
- JSP中用回車監(jiān)聽按鈕事件兼容火狐 IE等主流瀏覽器
- js鼠標(biāo)滑輪滾動事件綁定的簡單實(shí)例(兼容主流瀏覽器)
- javascript 按鍵事件(兼容各瀏覽器)
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- js獲取鍵盤按鍵響應(yīng)事件(兼容各瀏覽器)
- javaScript事件機(jī)制兼容【詳細(xì)整理】
相關(guān)文章
詳解JavaScript如何利用異步解密回調(diào)地獄
為了更好地處理這些異步操作,JavaScript?引入了異步編程的概念,這篇文章主要來和大家詳細(xì)聊聊JavaScript中異步的相關(guān)應(yīng)用,希望對大家有所幫助2024-02-02
實(shí)時(shí)編輯網(wǎng)頁網(wǎng)頁文字實(shí)時(shí)編輯,如同TEXTBOX一般
實(shí)時(shí)編輯網(wǎng)頁網(wǎng)頁文字實(shí)時(shí)編輯,如同TEXTBOX一般...2007-03-03
利用element-ui實(shí)現(xiàn)遠(yuǎn)程搜索兩種實(shí)現(xiàn)方式
這篇文章主要介紹了利用element-ui的兩種遠(yuǎn)程搜索實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
JS實(shí)現(xiàn)含有中文字符串的友好截取功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)含有中文字符串的友好截取功能,結(jié)合實(shí)例形式分析了JS針對含有中文的字符串截取操作相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12
BootStrap 圖標(biāo)icon符號圖標(biāo)glyphicons不正常顯示的快速解決辦法
這篇文章主要介紹了BootStrap 圖標(biāo)icon符號圖標(biāo)glyphicons不正常顯示的快速解決辦法,需要的朋友可以參考下2016-12-12
JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法
這篇文章主要介紹了JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法,需要的朋友可以參考下2018-07-07

