溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS常用事件兼容性處理方法

發(fā)布時間：2020-07-03 17:05:46 來源：網(wǎng)絡(luò) 閱讀：903 作者：穆飄 欄目：開發(fā)技術(shù)

event.js文件

//跨瀏覽器事件處理程序【根據(jù)能力檢測調(diào)用】


var EventObject = {

//添加事件
AddEvent:function(obj , type , eventFn){
if(obj.addEventListener){//常用
obj.addEventListener(type , eventFn , false);
}
else if(obj.attachEvent){//IE8及以下
obj.attachEvent('on'+type , eventFn);
}
else{//DOM零級事件處理
obj['on'+type] = eventFn; //obj.onclick === obj['onclick']
}
},

//刪除事件
DelEvent:function(obj , type , eventFn){
if(obj.removeEventListener){
obj.removeEventListener(type , eventFn , false);
}
else if(obj.detachEvent){
obj.detachEvent('on'+type , eventFn);
}
else{
obj['on'+type] = null;
}
},

//獲取事件對象
GegEvent:function(event){
return event ? event : window.event;
},

//獲取事件類型
GetType:function(event){
return event.type;
},

//獲取事件目標(biāo)
GetTarget:function(event){
return event.target || event.srcElement;
},

//阻止事件默認(rèn)行為
PreventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false; //IE8及以下的版本
}
},

//阻止事件冒泡
StopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true; //IE8及以下的版本
}
}

};


index.html頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件對象封裝調(diào)用</title>
<style type="text/css">
div{border: 1px solid red; padding: 20px;}
</style>
</head>
<body>
<div id="divBox">
<input type="button" name="btn1" id="btn1" value="通用跨瀏覽器點擊事件" />
<input type="button" name="btn2" id="btn2" value="事件類型type" />
<input type="button" name="btn3" id="btn3" value="事件目標(biāo)target" />
<input type="button" name="btn4" id="btn4" value="元素節(jié)點名稱target.nodeName" />
<input type="button" name="btn5" id="btn5" value="阻止事件冒泡stopPropagation()" />
<a id="Go">打開百度 阻止默認(rèn)行為preventDefault()</a>
</div>
</body>
<script src="event.js" type="text/JavaScript" charset="utf-8"></script>
<script type="text/javascript">
var Box = document.getElementById("divBox");
EventObject.AddEvent(Box , "click" , mupiao);
function mupiao(){
alert("我是裝按扭的DIV")
}

var btn1 = document.getElementById("btn1");

EventObject.AddEvent(btn1 , "click" , mupiao1); //添加事件方法

function mupiao1(){
alert("我調(diào)用了封裝的事件對象方法！");
}

//EventObject.DelEvent(btn1 , "click" , mupiao); //刪除事件方法

var btn2 = document.getElementById("btn2");
EventObject.AddEvent(btn2 , "click" , mupiao2);
function mupiao2(event){
alert(event.type); //事件類型（它是event的屬性）
}

var btn3 = document.getElementById("btn3");
EventObject.AddEvent(btn3 , "click" , mupiao3);
function mupiao3(event){
var event = event || window.event;
var ele = event.target || event.srcElement;
alert(ele);//事件目標(biāo)（它是event的屬性）
ele.style.background = "red"
}

var btn4 = document.getElementById("btn4");
EventObject.AddEvent(btn4 , "click" , mupiao4);
function mupiao4(event){
var e = EventObject.GegEvent(event);
var ele = EventObject.GetTarget(e);
alert(ele.nodeName);//元素節(jié)點名稱（它是event的屬性）
}

var btn5 = document.getElementById("btn5");
EventObject.AddEvent(btn5 , "click" , mupiao5);
function mupiao5(event){
event.stopPropagation(); //阻止事件冒泡
alert("阻止事件冒泡stopPropagation()");//元素節(jié)點名稱（它是event的方法）
}

var go = document.getElementById("go");
EventObject.AddEvent(go , "click" , goFn);
function goFn(event){
EventObject.PreventDefault(event);
EventObject.StopPropagation(event);
alert("阻止默認(rèn)行為preventDefault()");//元素節(jié)點名稱（它是event的方法）
}
</script>
</html>


向AI問一下細(xì)節(jié)
推薦閱讀：
  1. js event事件
  2. JS事件

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手