第一话：IE中用DOM方法绑定事件

时间：2021-08-22 00:49:40

工作比较忙，但是也一定要抽时间出来提升一下自己的基本功，只有技术实力到位，才能为公司和个人创造更多的价值。下面进入主题：

IE中事件监听比较容易用到，但是由它所引出的一个关于this的问题，不得不着重的去思考和记录一下。

一、浏览器中不同的事件监听/绑定（个人感觉用监听比较通俗易懂）：

//IE
element.attachEvent("event",functionname);                    //参数：1，表示监听的事件，需要在事件前加on（onclick，onfocus，onkeyevent……）2，响应事件时候所要执行的方法。
//Chrome and FireFox
element.addEventListener("event",functionname,false);         //参数：1和2同上（事件前不加on），3，是一个boolean，表示事件处理器是否启用事件捕捉。

二、既然不同的浏览器中的监听事件都清楚了，那我们有必要整合一种兼容性的方法出来。

//封装可重用的代码
functioin addListener(element,event,listener){
    if(element.addEventListener){                              //通过去区别该浏览器是否支持该方法，而执行不同的监听事件
        element.addEventListener(event,listener,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+event,listener);
    }
}

//这样就可以监听事件了在ie和webkit等内核浏览器下都ok
addListener(window,"keydown",HandleKeyDown);
addListener(window,"load",init);
addListener(document.getElementById("link"),"click",onclick);

三，通用的方法，写好了，但是如果想用this的话，会遇到一点麻烦。思考如下代码：

addListener(document.getElementById("mylink"),"click",foo(){
    alert(this.href);
})

我们预期的效果是输出mylink元素的href，但在IE下事实是这样么？

重点：当执行某个方法的时候，this所指向函数的拥有者。

例如：

//方法1
function myFuc(){
    alert(this);                        //这时候this指向window对象
}

//方法2
var el = function(){
    alert(this);                       //this-->window对象
} 

//方法2
var el.method = function(){
    alert(this);                       //this-->el对象
}
//方法2
var el = function(){
    alert(this);                       //this-->window对象
} 

//方法2
var el.method = function(){
    alert(this);                       //this-->el对象
}

这样比较容易理解，但将一个对象的方法传递给另外的函数时候，那结果就匪夷所思了：

function myFunc(func){
    func()
}

var el.method = function(){
    alert(this);
}

myFunc(el.method);               //参数只是el.method的一个引用，并非整个el对象，所以这个时候this是window，因为myFunc属于window

//这样有歧义的用法，最好了解透彻，然后根据需求设计。我们的本意其实可以用另外的一种方式实现。

function myFunc(func){
    func.call(el)                      //call方法：允许一个方法在另一个对象中执行（抽象），简单的说，其实是，func是在el对象的基础上执行。等价el.method()；
}

所以调用call方法之后，此刻this又指向了el对象。

四，修改addListener方法

functioin addListener(element,event,listener){
    if(element.addEventListener){
        element.addEventListener(event,listener,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+event,function(){listener.call(element)});
    }
}

五，事件既然可以监听，那就可以取消监听

//webkit
var bKeyEvent = false;

function HandleKeydown(evt){
       if(bKeyEvent){
            //todo
        } else {
             evt.preventDefault()
         }
}
addListener(window,"keydown",HandleKeydown);

//IE
var bKeyEvent = false;

function HandleKeydown(evt){
       if(bKeyEvent){
            //todo
        } else {
             evt.returnValue = false
         }
}
addListener(window,"keydown",HandleKeydown);

另外一种方法（更简洁直观）：

//webkit
window.removeEventListener("keydown",HandleKeyDown,false);
//IE
window.detachEvent(("keydown",HandleKeyDown);

相关文章