哈哈小老虎's Blog

今天，有个同事遇到这样的问题：IE下，给某个事件添加多个监听程序，在事件被激活时，监听程序没有按照添加顺序执行，但其他浏览器下却会按序执行，杯具。。。

一. 示例

// 基于YUI
var E = YAHOO.util.Event;
E.on(document, 'click', function() {
      alert(1);
});
E.on(document, 'click', function() {
      alert(2);
});
E.on(document, 'click', function() {
      alert(3);
});

我机器上(winxp)，各浏览器下的显示顺序:
(1) IE6：2,3,1
(2) IE7/8：3,2,1
(3) 非IE：1,2,3

二. 相关资料

在msdn上找到了一份关于attachEvent方法的官方说明，文章的Remarks部分对上例中的问题作出了说明：

If you attach multiple functions to the same event on the same object, the functions are called in random order, immediately after the object's event handler is called.

从官方说明中，可以了解到两点：
(1) 通过attachEvent添加的事件监听程序，在事件激活时，是被随机执行的(不过这解释不了IE7/8下的情况，明显就是倒序执行，这也叫随机，MD。。。);
(2) 通过attachEvent添加的事件监听程序，其激活顺序位于event handler(直接作为对象属性存在，如el.onclick = handler;)之后。

三. 验证一下第”2″点

// Test_1：event handler出现在event notify前面

var E = YAHOO.util.Event;
document.onclick = function() {
   alert('handler');
}
E.on(document, 'click', function() {
   alert('notify');
});

显示顺序：
(1) IE6/7/8：'handler' -> 'notify'
(2) 非IE：'handler' -> 'notify'

// Test_2：event handler出现在event notify后面

var E = YAHOO.util.Event;
E.on(document, 'click', function() {
   alert('notify');
});
document.onclick = function() {
   alert('handler');
}

显示顺序：
(1) IE6/7/8：'handler' -> 'notify'
(2) 非IE：'notify' -> 'handler'

IE果然如他宣称的，”after the object’s event handler is called”；非IE则不管这些，执行顺序完全取决于监听程序的添加顺序！

网上有文章提到：jQuery中添加事件监听的方法解决了IE的问题(都是按添加顺序执行)，这个有待验证，但可以确定的是YUI 2.7和2.8未解决该问题。