<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<div id="box">
<input type="button" value="btn1" id="btn1" onclick="getMassage()">
<input type="button" value="btn2" id="btn2">
<input type="button" value="btn3" id="btn3">
<input type="button" value="btn4" id="btn4">
</div>
<script type="text/javascript">
//1.HTML程序事件处理程序
function getMassage(event){
alert(event.target.nodeName);
event.stopPropagation();//阻止事件冒泡
}
function getBox(){
alert('this is the box !!');
}
// //2.DOM0级事件处理程序
// var btn2=document.getElementById('btn2');
// btn2.onclick=function() {
// alert("hello2!");
// }
// btn2.onclick=null;
// //3.DOM2级事件处理程序
// var btn3=document.getElementById('btn3');
// btn3.addEventListener('click',getMassage,false);
// btn3.removeEventListener('click',getMassage,false);
// //4.IE事件处理程序
// var btn4=document.getElementById('btn4');
// btn4.attachEvent('onclick',getMassage);
//5.跨浏览器处理程序
var eventUtil={
addHandler:function(elment,type,handler){
if(elment.addEventListener){//0级
elment.addEventListener(type,handler,false);
}else if(elment.attachEvent){//IE
elment.attachEvent('on'+type,handler);
}else{
elment['on'+type]=handler;
}
},
removeHandler:function(elment,type,handler){
if (elment.removeEventListener) {
elment.removeEventListener(type,handler,false);
}else if (elment.detachEvent) {
elment.detachEvent('on'+click,handler);
}else{
elment['on'+click]=handler;
}
}
}
eventUtil.addHandler(btn3,'click',getMassage);
eventUtil.addHandler(btn3,'click',getBox);
</script>
</body>
</html>