转载:js事件处理程序的运行环境(改变attachEvent内部的this指向&封装兼容性的 addEvent方法)

原文:改变attachEvent内部的this指向 封装兼容性的 addEvent(elem, type, handle);方法

<div style="width:100px; height:100px; background-color:red"></div><script>
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function () {
        console.log(this);
    }    //<div style="width:100px; height:100px; background-color:red"></div>

    div.addEventListener('click', function () {
        console.log(this);
    }, false)    //<div style="width:100px; height:100px; background-color:red"></div>

    div.attachEvent('click', function () {
        console.log(this);
    })    
//演示不了，只能在IE中演示，而且这里的this指向的是window
</script>

1.ele.onxxx = function (event) {} 
程序this指向是dom元素本身

2.obj.addEventListener(type, fn, false); 
程序this指向是dom元素本身

3.obj.attachEvent(‘on’ + type, fn); 
程序this指向window

因为attachEvent方法在使用时，内部的this指向的是window，不方便，所以有时候要把这里的this变成自身

改变attachEvent内部的this指向

var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick', function () {
    handle.call(div); //通过.call方法，把指向改成div
                      //然后再在外部的handle函数中执行,这样this就绝对指向div了。});function handle() {
    //事件处理程序}

封装兼容性的 addEvent(elem, type, handle);方法

function addEvent(elem, type, handle) {    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    }else{
        elem['on' + type] = handle;
    }
}

参考: http://hao2013.cn/?id=45