addEventListener attachEvent和解决IE 6 7 8 this指向错误

标准浏览器中可以使用addEventListener()函数来给DOM元素绑定事件,使用removeEventListener()函数移除事件绑定,而IE6 IE7 IE8不支持addEventListener()和removeEventListener(),只能使用attachEvent()和detachEvent()方法。IE从IE9开始支持addEventListener和removeEventListener.
addEventListener()和attachEvent()的区别主要有以下几点:

  • addEventListener(type, handler, capture)有三个参数,其中type是事件名称,如click,handler是事件处理函数,capture是否使用捕获,是一个布尔值,默认值为false,第三个参数可以省略不写。
    attachEvent(‘on’ + type, handler)有两个参数,其中type是事件名称,如click,第一个参数必须是onxxxx,handler是事件处理函数,IE6 IE7 IE8不支持事件捕获,只支持事件冒泡,所以不存在第三个参数。
    关于事件冒泡:如果一个元素和它的各层上级素都设置了相同的事件,比如click事件,那么冒泡是指,事件触发时,首先触发最底层元素的事件,然后依次逐层递进触发上一级元素的相同事件,就像泡泡从水底冒到水面一样。
    而与事件冒泡相反,事件捕获的顺序是,从页面的根元素开始依次逐层向下级触发事件。
    IE6-8只支持事件冒泡不支持事件捕获,Google Chrome/Firefox/Safari/Opera等标准现代浏览器支持事件捕获和事件冒泡。
    如果只想在最底层执行事件处理函数,阻止事件向上层元素冒泡,也就是说如果要阻止事件冒泡,标准浏览器可以使用event.stopPropagation(),IE6 7 8可以使用设置window.event.cancelBubble=true来处理
  • addEventListener如果绑定多个事件处理函数,事件触发时按绑定顺序依次调用事件处理函数,attachEvent绑定多个事件处理函数,事件触发时从最后一个函数依次逆向调用处理函数。
  • 在IE6 IE7 IE8浏览器中,使用了attachEvent或detachEvent后事件处事函数里面的this指向window对象,而不是触发事件的元素,文末有解决方案。
  • 如果一个事件在绑定以后又有解除绑定的需要,可以使用removeEventListener(),参数和addEventListener一样,IE6 IE7 IE8使用detachEvent()方法,参数和attachEvent()一样,注意,想要移除绑定的事件处理函数,绑定事件时不能使用匿名函数,而需要将事件处事函数单独写成一个函数。否则无法移除绑定的事件处理函数,因为只有绑定的事件处理函数才能移除,而匿名函数和匿名函数是互不相同的,即使两个匿名函数代码完全一样,本质上同一匿名函数的代码写两次也是两个不同的函数。
    下面以addEventListener为例

<a id=”xc”>点击</a>

<script type=”text/javascript”>

function handler(){

alert(this.innerHTML);

}

var object=document.getElementById(‘xc’);

xc.addEventListener(‘click’,handler,false);//添加事件处理函数

xc.removeEventListener(‘click’,handler,false);//移除事件处理函数

/*下面这种使用匿名函数的方式添加的事件处理函数是不能移除的,因为两个匿名函数虽然代码一样,但他们是两个不同的函数

xc.addEventListener(‘click’,function(){

 

                        alert(this.innerHTML);

},false);

xc.removeEventListener(‘click’,function(){

alert(this.innerHTML);

},false);

*/

</script>

 

  • 所添加的事件必须是事件对象支持的事件,比如给window对象添加click事件就不会成功,因为window没有click事件
  • 解决IE6 IE7 IE8 attchEvent this指向window的方法:

   要解决IE6 IE7 IE8 attachEvent this指向错误,有至少以下三种方法:

  • 使用事件处理函数.apply(事件对象,arguments),代码如下
    以下代码仅适用于IE6 IE7 IE8
    这种方式的缺点是绑定的事件无法取消绑定,原因上面已经说了,匿名函数和匿名函数之间是互不相等的。

<a id=”xc”>点击</a>

<script type=”text/javascript”>

var object=document.getElementById(‘xc’);

function handler(){

alert(this.innerHTML);

}

object.attachEvent(‘onclick’,function(){

handler.call(object,arguments);

});

</script>

  • 使用事件源代替this关键字
    以下代码仅适用于IE6 IE7 IE8,这种方式完全忽略this关键字,但写起来稍显麻烦。

<a id=”xc”>点击</a>

<script type=”text/javascript”>

function handler(e){

e=e||window.event;

var _this=e.srcElement||e.target;

alert(_this.innerHTML);

}

var object=document.getElementById(‘xc’);

object.attachEvent(‘onclick’,handler);

</script>

  • 自己写一个函数完全代替attachEvent/detachEvent,并且支持所有主流浏览器、解决IE6 IE7 IE8事件绑定导致的先绑定后执行问题。
    下面是完美兼容addEventListener/removeEventListener和attachEvent/detachEvent的函数,支持Google Chrome/Firefox/Safari/Opera/IE 6 7 8 9 10 11等所有主流浏览器,能够完美解决IE6 IE7 IE8 this指向错误,能够纠正IE6 IE7 IE8中事件先绑定后执行的错误。
    为了避免代码被编辑器修改,请下载附件测试。不要直接复制下面的代码。
    注意,本函数是全局函数,而不是DOM对象的成员方法。

<a id=”xc”>点击</a>

<script type=”text/javascript”>

/*

* 添加事件处理程序

* @param object object 要添加事件处理程序的元素

* @param string type 事件名称,如click

* @param function handler 事件处理程序,可以直接以匿名函数的形式给定,或者给一个已经定义的函数名。匿名函数方式给定的事件处理程序在IE6 IE7 IE8中可以移除,在标准浏览器中无法移除。

* @param boolean remove 是否是移除的事件,本参数是为简化下面的removeEvent函数而写的,对添加事件处理程序不起任何作用

*/

function addEvent(object, type, handler, remove){

if(typeof object!=’object’||typeof handler!=’function’) return;

try{

object[remove?’removeEventListener’:’addEventListener’](type,handler,false);

}catch(e){

var xc=’_’+type;

object[xc]=object[xc]||[];

if(remove){

var l=object[xc].length;

for(var i=0;i<l;i++){

if(object[xc][i].toString()===handler.toString()) object[xc].splice(i,1);

}

}else{

var l=object[xc].length;

var exists=false;

for(var i=0;i<l;i++){

if(object[xc][i].toString()===handler.toString()) exists=true;

}

if(!exists) object[xc].push(handler);

}

object[‘on’+type]=function(){

var l=object[xc].length;

for(var i=0;i<l;i++){

object[xc][i].apply(object,arguments);

}

}

}

}

/*

* 移除事件处理程序

*/

function removeEvent(object,type,handler){

addEvent(object,type,handler,true);

}

</script>

<script type=”text/javascript”>

function handler(){

alert(this.innerHTML);

}

var object=document.getElementById(‘xc’);

addEvent(object,’click’,handler);

//如果要测试绑定事件,请先删除下面这一行。

removeEvent(object,’click’,handler);

</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注