DOM事件模型的两件事(2)
今天图老师小编给大家精心推荐个DOM事件模型的两件事(2)教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~
重复绑定
IE下没有addEventListener,但是也有自己的attachEvent,即所谓的MicrosoftModel。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”,而addEventListener不用,另外attachEvent因为不支持事件捕捉,所以也没有第三个参数。
然而,attachEvent还有一个很要命的问题:重复绑定事件。(这是从ppkonJavaScript中学到的)
一个例子:
functionsayHello(){
alert('Hello,world!');
}
//W3CModel
$('div1').addEventListener('click',sayHello,false);
$('div1').addEventListener('click',sayHello,false);
//MicrosoftModel
$('div1').attachEvent('onclick',sayHello);
$('div1').attachEvent('onclick',sayHello);
在W3C模型中,相同事件处理函数的绑定会被忽略,也就是说第二个$('div1').addEventListener('click',sayHello,false);会被忽略。
而在Microsoft模型中,第二个$('div1').attachEvent('onclick',sayHello);同样会被执行,所以,当你点击#div1的时候,alert框会弹出来两次。更有甚者,在detachEvent时候,也同样要detachEvent两次才能彻底把sayHello从#div1的click事件中删除。
为什么不继续使用alertID()了?
这是因为IE的事件模型的另一个缺陷,在alertID中,使用了this关键字来指代被委派了该事件处理函数的元素,这样,在W3C模型中,alertID中的this指代了#div1或者#div2。
但是在Microsoft模型中,缺少了对this的支持后,this.id就会变为undefined,因为这时候this指代了window对象。