HTML事件处理程序
HTML程序和JS无法分离
DOM0级事件处理程序
DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理制定和删除事件处理程序的操作：addEventListener()和removeEventListener()。他们都接收三个参数：要处理的事件名、作为事件处理程序的函数，布尔型变量（true表示事件捕获，false表示事件冒泡）
DOM2在IE浏览器中不起作用
IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收两个相同的参数：事件处理程序的名称、事件处理程序的函数
不适用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡
跨浏览器的事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
</head>
<body>
<div class="box">
<input type="button" value="按钮0" id = "btn0" onclick="showMes()">
<input type="button" value="按钮1" id = "btn1">
<input type="button" value="按钮2" id = "btn2">
</div>
<script>
function showMes(){
alert('hello world');
}
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick=function () {
alert("这是通过DOM0级添加的事件")
}
btn1.onclick=null;//删除onclick属性，清除事件
//DOM2级事件
/* btn2.addEventListener('click',showMes,false);
btn2.addEventListener('click',function(){
alert(this.value)
},false);
//删除事件
//IE8之前的处理方法
//btn2.removeEventListener('click',showMes,false);
// btn2.attachEvent('onclick',showMes);
// btn2.detachEvent('onclick',showMes);*/
//跨浏览器的处理方法:封装在一个对象中
var eventUtil = {
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)//DOM2级事件处理
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);//IE浏览器事件处理
}else{
element['on'+type]=handler;//DOM0级事件处理
}
},
//删除句柄
removeHandler:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false)//DOM2级事件处理
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);//IE浏览器事件处理
}else{
element['on'+type]=handler;//DOM0级事件处理
}
}
}
//调用
eventUtil.addHandler(btn2,'click',showMes);
eventUtil.removeHandler(btn2,'click',showMes);
</script>
</body>
</html>
网友评论