javascript 懒事件(动态事件)

最近看ol2源码的时候发现的,懒事件,动态事件,就是对DOM element 附加事件的时候,动态改变eventHandle,实际就是用了js原型链及闭包的知识

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <title></title>
</head>
<body>
    <button id="btn">lazy event</button>
</body>
<script>
var clickHandle = function(){
    alert(1);
}
var clickHandle2 = function(){
    alert(2);
}

var CEvent = function(){
    this.handle;
};
CEvent.prototype ={

    setHandle : function(handle){
        this.handle = handle;
    },
    attachHanlde : function(){
        var self = this;
        return function(event){
            return self.handle.call(event || window.event);
        };
    }
}
var myEvent = new CEvent();
myEvent.setHandle(clickHandle);

document.getElementById("btn").addEventListener("click",myEvent.attachHanlde());
//document.getElementById("btn").addEventListener("click",myEvent.handle);

myEvent.setHandle(clickHandle2);

</script>
</html> 

实例很简单,自己运行试试就知道了

猜你喜欢

转载自blog.csdn.net/u010468602/article/details/51970915