转载：闭包的应用场景

 


//以下是解决方式
function associateObjWithEvent(obj,methodName){
    return (function(e){
        e=e||window.event;
        return obj[methodName](e,this);//重点看这里！有两个参数，

        //e:event，元素绑定事件时，绑定的是对内部函数的引用，故在触发事件时，执行的是内部函数。

        //内部函数有个e参数，刚好在事件触发时，能捕获到是什么事件类型。

        //this:这里需要的就是this参数，以便当元素触发事件处理函数执行时，this=触发事件的元素本身

        //this参数无法从外部传入进来。传入进来的this都会被转化特定对象    

    );
} 

function DhtmlObject(elId){
    var el=document.getElementById(elId);
    if(el){
        //el.onclick=associateObjWithEvent(this,"doOnClick");
        el.onmouseover=associateObjWithEvent(this,"doMouseOver");
        el.onmouseout=associateObjWithEvent(this,"doMouseOut");
    }
}
DhtmlObject.prototype.doMouseOver=function(event,element){
    alert(event);//第一个参数，只在事件执行时，才知道是什么事件，这里是MouseEvent
    alert(arguments[0]);//第一参数，
   alert(element);//第二个参数，只在事件执行时，才知道是指代触发事件的元素本身
    alert(arguments[1]);//第二个参数
}

var hello=new DhtmlObject("hello");  //执行

function associateObjWithEvent(obj,methodName){
    return (function(e){
        e=e||window.event;
        return obj[methodName](e);
    });
}

function DragListener(){
    this.down=function(){
        alert(this)
        alert(arguments[0])
    },
    this.move=function(){
        alert(2)
    }
}

var obj=new DragListener();

document.getElementById("hello").onmousedown =obj.down;//正确 但我们在方法中用this访问到的对象是 dom
document.getElementById("hello").onmousemove = obj.move;//正确

document.getElementById("hello").onmousedown =associateObjWithEvent(obj,'down');//正确
document.getElementById("hello").onmousemove = associateObjWithEvent(obj,'move');//正确