javascript 兼容各個瀏覽器的事件
調(diào)用事件:
事件對象
什么是事件對象?在觸發(fā)dom上的事件是都會產(chǎn)生一個事件對象event。例如鼠標(biāo)點(diǎn)擊的時候,自己就會產(chǎn)生比如點(diǎn)擊的類型啊 還要那個元素發(fā)出的
dom 事件對象 type 屬性用于獲取事件對象, target屬性 用于獲取事件目標(biāo),stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默認(rèn)行為
IE中的事件對象 type 屬性 用于獲取事件對象, srcElement屬性 用于獲取事件目標(biāo) cancelBubble屬性 用于阻止事件冒泡 設(shè)置為true是表示阻止 false表示不阻止
returnValue 屬性 用于阻止事件的默認(rèn)行為 設(shè)置為false的時候表示阻止
// 兼容各個瀏覽器 跨瀏覽器事件處理------- 統(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)前的那個元素
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 DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動,有一個div跟隨鼠標(biāo)移動的結(jié)果,有一連串跟隨鼠標(biāo)移動的效果,感興趣的小伙伴們可以參考一下2016-02-02js 用CreateElement動態(tài)創(chuàng)建標(biāo)簽示例
用CreateElement動態(tài)創(chuàng)建標(biāo)簽,主要是html中常用的一些標(biāo)簽,在本文有詳細(xì)的示例,喜歡的朋友可以參考下2013-11-11JavaScript聲明變量的這四兄弟(var、let、function、const)
這篇文章主要介紹了JavaScript聲明變量的這四兄弟,主要就是介紹var、let、function、const區(qū)別,需要的朋友可以參考下2023-02-02JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動態(tài)飄落
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動態(tài)飄落,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02