<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META charset="utf-8">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY id="body">
<input type="button" value="按钮" id="btn">
<!--HTML处理事件-->
<input type="button" value="按钮2" id="btn2" onclick="mes()">
<input type="button" value="按钮3" id="btn3" onclick="alert('hello')">
<script>
var btn=document.getElementById('btn');
var body=document.getElementById('body');
var message=function(e){
alert(e.target.nodeName);
e.stopPropagation();
}
function bodyF(){
alert("这是body产生的");
}
function mes(){
alert("hello word!");
}
//添加句柄
var eventUtil={//封装一个对象
addHandle:function(element,type,haddle){
if(element.addEventListener){
addEventListener(type,haddle,false);//dom2级处理事件
}else if(element.attachEvent){
attachEvent('on'+type,haddle);//IE浏览器处理事件
}else{
element['on'+type];//dom0级处理事件
}
},
//删除句柄
removeHandle:function(element,type,haddle){
if(element.removeEventListener){
removeEventListener(type,haddle,false);
}else if(element.detachEvent){
detachEvent('on'+type,haddle);
}else{
element['on'+type]=null;
}
}
}
eventUtil.addHandle(btn,'click',message);
eventUtil.addHandle(body,'click',bodyF);
//eventUtil.removeHandle(btn,'click',message);
</script>
</BODY>
</HTML>
ruibin
相关分类