<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>