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

 狼丶宇先生   2018-05-15 11:06   433 人阅读  0 条评论
<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
版权声明:本文为原创文章,版权归 狼丶宇先生 所有,欢迎分享本文,转载请保留出处!