您的位置：首页 > Web前端 > JavaScript

js事件封装(已兼容)

2015-10-13 10:58 603 查看

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>点我</button> <br><br>
<a href="http://www.baidu.com">我链接到百度！</a>
<script src="a.js"></script>
<script>
var btn = document.querySelector("button");
var link = document.querySelector("a");
var body = document.querySelector("body");
var btnHandler = function(event){
console.log("我是btnHandler内部！");
console.log(EventUtil.getEvent(event).type);
console.log("我的target是" + EventUtil.getTarget(event));
console.log("我的current target是" + EventUtil.getEvent(event).currentTarget);
// console.log("接下来我要阻止冒泡了！");
// EventUtil.stopPropagation(event);
};
var linkHandler = function(event){
EventUtil.preventDefault(event);
};
var bodyHandler = function(event){
console.log("\n");
console.log("我是bodyHandler内部！");
console.log(EventUtil.getEvent(event).type);
console.log("我的target是" + EventUtil.getTarget(event));
console.log("我的current target是" + EventUtil.getEvent(event).currentTarget);
};

EventUtil.addHandler(btn,"click",btnHandler);
EventUtil.addHandler(link,"click",linkHandler);
EventUtil.addHandler(body,"click",bodyHandler);

</script>
</body>
<html>

a.js代码

/**
*自己把dom2级事件封装好，这样可兼容各种浏览器！主要是解决ie8及以下的不兼容问题
**/
var EventUtil = {
addHandler: function(elem, type, handler){
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
} else if (elem.attachEvent) {
//ie8及以下
elem.attachEvent("on" + type, handler);
} else {
elem["on" + type] = handler;
}
},
removeHandler: function(elem, type, handler){
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (elem.detachEvent) {
//ie8及以下
elem.detachEvent("on" + type, handler);
} else {
elem["on" + type] = null;
}
},
getEvent: function(event){
//ie返回window.event
return event || window.event;
},
//获取正在进行的目标而非定义的那个目标(currentTarget)
getTarget: function(event){
return event.target || window.event.srcElement;
},
//阻止默认事件的执行
preventDefault: function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
window.event.returnValue = false;
}
},
//停止冒泡
stopPropagation: function(event){
if (event.stopPropagation) {
event.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航