<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨浏览器事件处理程序</title>
</head>
<body>
<button id="btn">点击我</button>
<div id="parent">
<div id="child">父亲儿子</div>
</div>
<a href="www.baidu.com">跳转链接</a>
<input type="text" id="input">
<script type="text/javascript">
//兼容所有浏览器事件
var EventUtil = {
//绑定事件
addHandler:function(element,type,handler){
if(element.addEventListener){
//DOM2级事件,主流浏览器下添加事件,如chrome,firfox
element.addEventListener(type, handler,false);
}else if(element.attachEvent){
//IE8以下浏览器添加事件
element.attachEvent("on"+type,handler);
}else{
//DOM0级事件
element["on"+type] = handler;
}
}, //注意方法之间用逗号隔开
//解除绑定事件
removeHandler:function(element,type,handler){
if(element.removeEventListener){
//主流浏览器下解除绑定事件,如chrome
element.removeEventListener(type, handler,false);
}else if(element.detachEvent){
//IE8以下浏览器解除绑定事件
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
//event事件源
getTarget:function(event){
//target为主流浏览器,srcElement为IE8以下浏览器
return event.target || event.srcElement;
},
//阻止默认行为
preventDefault:function(event){
if(event.preventDefault){
//主流浏览器下阻止默认行为
event.preventDefault();
}else{
//IE8以下浏览器阻止默认行为,false为阻止
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
//主流浏览器下阻止事件冒泡
event.stopPropagation();
}else{
//IE8以下浏览器阻止事件冒泡
event.cancelBubble = true;
}
},
//获得键盘按下的键值
getCharCode:function(event){
if(event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
var btn = document.getElementById("btn");
var child = document.getElementById("child");
var parent = document.getElementById("parent");
var a = document.getElementsByTagName("a")[0];
var input = document.getElementById("input");
//事件元素element,事件处理类型type,handler事件句柄(事件处理函数)
var handler = function(){
alert(1);
}
//为按钮添加事件
EventUtil.addHandler(btn,"click",handler);
//为按钮移除事件
EventUtil.removeHandler(btn,"click",handler);
//点击父亲儿子获取事件源
EventUtil.addHandler(child,"click",function(event){
var target = EventUtil.getTarget(event);
console.log(target);
})
//阻止a跳转
EventUtil.addHandler(a,"click",function(event){
EventUtil.preventDefault(event);
})
//阻止冒泡
EventUtil.addHandler(child,"click",function(event){
alert("儿子被触发了");
EventUtil.stopPropagation(event);
})
EventUtil.addHandler(parent,"click",function(event){
alert("父亲被触发了");
})
//获得键盘按下的键值
EventUtil.addHandler(input,"keypress",function(event){
console.log(EventUtil.getCharCode(event));
})
</script>
</body>
</html>