<html>
<head>
<title>html5</title>
</head>
<body>
<span id="test">dianji-click-event</span>
<a id="bindEvent" href="javascript:;" >BindEvent</a> | <a id="removeEvent" href="javascript:;" >RemoveEvent</a>
html5
<script type="text/javascript" >
var EventUtil = {
addHandler:function(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false); //buldding
}else if(ele.attachEvent){
ele.attachEvent('on'+type,handler);
}else{
ele["on"+type] = handler;
}
},
removeHandler:function(ele,type,handler){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false); //buldding
}else if(ele.detachEvent){
ele.detachEvent('on'+type,handler);
}else{
ele["on"+type] = null;
}
}
}
var ele = document.getElementById('test');
var i=0;
EventUtil.addHandler(document.getElementById("bindEvent"),'click',function(){
EventUtil.addHandler(ele,'click',function(){
i+=1;
console.log('You click me!' + i)
});
})
EventUtil.addHandler(document.getElementById("removeEvent"),'click',function(){
EventUtil.removeHandler(ele,'click',function(){
i-=1;
console.log('You Remove click me!' + i)
});
})
</script>
</body>
</html>