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

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