addEventListener & removeEventListener || attachEvent & detachEvent

最新推荐文章于 2024-10-08 13:51:35 发布

weixin_30585437

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/didi/archive/2012/08/19/2646607.html

版权

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