attachEvent inserts events at the begin of the queue while addEventListener appends events to the queue

Question

I use this simple working function to add events:

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);
   };
}

While doing this simple test:

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

I noticed that FF3.6 addEventListener appends each new events at the end of the events' queue, therefor in the above example you would get two alerts saying 'load 1' 'load 2'.

On the other side IE7 attachEvent inserts each new events at the begining of the events' queue, therefor in the above example you would get to alerts saying 'load 2' 'load 1'.

Is there a way to fix this and make both to work in the same way?

Thanks!

Answer 1

You could "queue" up the events then execute them on mass when the event is triggered in a fixed order

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);
    }
}

Called;

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

this creates;

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

then adds a call to Events.run("load") on the elements onload which iterates and calls everything in Event["load"][].

Answer 2

According to the MSDN documentation, the order of execution with attachEvent is not specified (the word used is "random"). However it's not surprising that it'd be reverse order of attachment.

You could avoid doing that altogether, and build a chain of handlers based off the "on*event*" attributes of the elements involved. Or you could just use jQuery or something like that, if possible and appropriate.

Answer 3

I solve this problem:

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();}
         }
    }
}

work perfectly

Answer 4

Hello Marco, for performance reasons, so I prefer to use native code for browsers that support the feature.