一、IE事件流(IE事件处理程序)
1、添加事件
attachEvent()
语法:element.attachEvent(event,function)
功能:用于向指定元素添加事件句柄;
参数:
event:必须。字符串,指定事件名,必须加“on"前缀。
function:必须。指定事件触发时执行的函数。
2、移除事件
detachEvent()
语法:element.detachEvent(event,function)
功能:移除attachEvent()放法添加的事件句柄
参数:event:必须,字符串,要移除的事件名称。
function:必须。指定要移除的函数。
跨浏览器事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跨浏览器事件处理程序</title>
</head>
<body>
<button id="myBtn">点击我</button>
<script>
//此代码可以兼容所有浏览器
//addEventListener attachEvent
var EventUtil = {
addHandler:function(element,type,handler){
//绑定事件
//chrome,firefox.IE9等, addEventListener
//IE8及IE8以下的浏览器,attachEvent
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = null
}
},
// removeHandler:function(element,type,handler){
// //移除事件
// //chrome,firefox.IE9等, removeEventListener
// //IE8及IE8以下的浏览器,detachEvent
// if(element.removeEventListener){
// element.removeEventListener(type,handler,false);
// }else if(element.detachEvent){
// element.detachEvent("on"+type,handler);
// }else{
// element["on"+type] = null
// }
// }
}
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
}
EventUtil.addHandler(btn,"click",handler);
// EventUtil.removeHandler(btn,"click",handler);
</script>
</body>
</html>
二、事件冒泡与事件捕获
1、事件冒泡:先执行儿子,再执行父亲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件冒泡与事件捕获</title>
</head>
<body>
<div id="uncle"></div>
<div id="parent">
<div id="child" class="child">点击儿子</div>
</div>
<script>
//事件冒泡
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
})
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发,"+th