Question

我使用这个简单的工作函数来添加事件：

function AppendEvent(html_element, event_name, event_function)
{
   if(html_element)
   {
      if(html_element.attachEvent) //IE
         html_element.attachEvent("on" + event_name, event_function);
      else if(html_element.addEventListener) //FF
            html_element.addEventListener(event_name, event_function, false);
   };
}

在做这个简单的测试时：

AppendEvent(window, 'load', function(){alert('load 1');});
AppendEvent(window, 'load', function(){alert('load 2');});

我注意到FF3.6 addEventListener 在事件队列的末尾追加每个新事件，因此在上面的示例中，您将收到两个警告，说'加载1''加载2'。

另一方面，IE7 attachEvent在事件队列的开头处插入每个新事件，因此在上面的示例中，您将收到警告“加载2”加载1'。 / p>

有没有办法解决这个问题并让两者以同样的方式运作？

谢谢！

Answer 1

根据MSDN文档，未指定attachEvent的执行顺序（使用的单词是“随机”）。然而，这与附件的逆序相反并不奇怪。

您可以完全避免这样做，并根据所涉及元素的“on event ”属性构建一系列处理程序。或者你可以使用jQuery或类似的东西，如果可能的话。

Answer 2

我解决了这个问题：

function addEvent(obj,evtype,func,bubble)
{
    try
    {
         obj.addEventListener(evtype,func,bubble);
    }
    catch(err) // for bastard IE
    {
         if(obj["on"+evtype] == null)
              obj["on"+evtype] = func;
         else
         {
          var e = obj["on"+evtype];
          obj["on"+evtype] = function(){e(); func();}
         }
    }
}

完美地工作

Answer 3

您可以“排队”事件，然后在按固定顺序触发事件时按质量执行它们

var Events = {
    Event: [], 
    appendEvent: function(html_element, event_name, event_function) {
        if (!this.Event[event_name]) {
            this.Event[event_name] = [];
            if (html_element.attachEvent) //IE
            html_element.attachEvent("on" + event_name, function(event) {Events.run(event_name, event)});
        else if (html_element.addEventListener) //FF
            html_element.addEventListener(event_name, function(event) {Events.run(event_name, event)} , false);
        }
        this.Event[event_name].push(event_function)
    },
    run: function(event_name, event) {
        for (var k in this.Event[event_name])
            this.Event[event_name][k](event);
    }
}

调用;

Events.appendEvent(window, 'load', function(){alert('load 1');});
Events.appendEvent(window, 'load', function(){alert('load 2');});

这会创造;

Event["load"][0] == function(){alert('load 1');
Event["load"][1] == function(){alert('load 2');

然后在元素onload上添加对Events.run("load")的调用，迭代并调用Event["load"][]中的所有内容。

attachEvent在队列的开头插入事件，而addEventListener将事件附加到队列

3 个答案: