首页 > 代码库 > 第一话：IE中用DOM方法绑定事件

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

2024-07-08 18:42:43   223人阅读

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

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

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

//IEelement.attachEvent("event",functionname);                    //参数：1，表示监听的事件，需要在事件前加on（onclick，onfocus，onkeyevent……）2，响应事件时候所要执行的方法。//Chrome and FireFoxelement.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等内核浏览器下都okaddListener(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所指向函数的拥有者。

例如：

//方法1function myFuc(){    alert(this);                        //这时候this指向window对象}//方法2var el = function(){    alert(this);                       //this-->window对象} //方法2var el.method = function(){    alert(this);                       //this-->el对象}
//方法2var el = function(){    alert(this);                       //this-->window对象} //方法2var 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)});                   }}

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

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

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

//webkitwindow.removeEventListener("keydown",HandleKeyDown,false);//IEwindow.detachEvent(("keydown",HandleKeyDown);

 


联系
我们