<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮1" onclick="message()">
<!使用html事件处理程序，改动时需要改动俩处!>
<input type="button" value="按钮2" id="bn1">
<!使用DOM0级事件处理程序，此时只需改动一处，且能添加多个事件处理程序!>
<input type="button" value="按钮3" id="bn2">
<script>
var bn1=document.getElementById("bn1");
var bn2=document.getElementById("bn2");
function message(){
alert("我只是个按钮哦");
}
bn1.onclick = functiom(){
alert("ddd"); };
//DOM0级事件处理程序,取消可写bn1.onclick=null
//bn2.addEventListener('click',message,flase);
//DOM2级事件处理程序，当处理捕获事件流用true，冒泡事件流时用flase
//取消：bn2.removeEventListener('click',message,flsae)
//bn2.attachEvent('onclick',message);
//这是ie浏览器中的DOM2级事件处理程序
//ie中默认支持冒泡事件流，所以不需要布尔值参数
//取消用：deltachEvent("onclick",message());
//跨浏览器事件处理程序
var EventHandle={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addeventListener(type,handler,flase);
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}
else{element['on'+type]=headler;
}
}
,
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeeventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{element['on'+type]=null;
}
}
}
EventHandle.addHandler(bn2,'click',message);
</script>
</body>
</html>相关分类