将多个事件附加到 IE 中的按钮问题答案

【问题标题】：attaching multiple events to a button issue in IE将多个事件附加到 IE 中的按钮问题
【发布时间】：2014-12-11 10:28:08
【问题描述】：

我正在开发 2000 年初设计的非常旧的应用程序。该页面在 IE9 上完美运行，但在 Firefox 上却不行。经过大量挖掘后，我遇到了一个问题。我已经在这个简单的例子中重现了这一点。

function bindEvent(el, eventName, eventHandler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, eventHandler, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + eventName, eventHandler);
  }
}

function fun() {
  var ele = document.getElementById("tt");
  bindEvent(ele, "click", one);
  bindEvent(ele, "click", two);
  bindEvent(ele, "click", three);

}

function one() {
  alert("1");
}

function two() {
  alert("2");
}

function three() {
  alert("3");
}

<button onclick="fun()">Bind</button>
<button id="tt" name="tt">Test</button>

我写了自定义的bindevent函数为attachevent非IE浏览器不支持。

单击绑定按钮会将三个事件绑定到测试按钮。现在点击Test按钮输出是

IE：

3 2 1

火狐

1 2 3

那么有什么方法可以确保在两个浏览器中执行顺序相同

【问题讨论】：

使用 jQuery？它在内部实现事件处理程序，因此它在所有浏览器中获得一致的顺序。
客户端没有权限在此页面上使用 jquery。这就是问题
那么您需要编写自己的自定义事件处理函数来实现您想要的排序。祝你好运。

标签： javascript html internet-explorer firefox internet-explorer-9

【解决方案1】：

这是 IE8 事件模型的一个怪癖。 MSDN对attachEvent发表评论：

如果您将多个函数附加到同一对象上的同一事件，则在调用对象的事件处理程序后立即以随机顺序调用这些函数。

我认为您可以通过只注册一个事件处理程序而不是三个来克服它。

function fun() {
  var ele = document.getElementById("tt");
  bindEvent(ele, "click", function() {
    one();
    two();
    three();
  });
}

【讨论】：