关于DOM事件模型的两件事

二、IE的高级事件处理模型的问题

重复绑定 Webjx.Com

IE下没有addEventListener，但是也有自己的attachEvent，即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数（事件类型）需要加”on”，而addEventListener不用，另外attachEvent因为不支持事件捕捉，所以也没有第三个参数。 Webjx.Com

然而，attachEvent还有一个很要命的问题：重复绑定事件。（这是从ppk on JavaScript中学到的）

一个例子：

Webjx.Com

function sayHello(){
alert('Hello, world!');
}
// W3C Model
$('div1').addEventListener('click', sayHello, false);
$('div1').addEventListener('click', sayHello, false);
// Microsoft Model
$('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对象。