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!

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!

• javascript
• events
• event-handling
• addeventlistener

Share Follow edited Apr 13, 2010 at 12:45 Marco Demaio asked Apr 13, 2010 at 12:23 Marco DemaioMarco Demaio 34.5k3333 gold badges132132 silver badges161161 bronze badges 2

• What about the other browsers? – Alsciende Commented Apr 13, 2010 at 12:38
• Tested SAFARI 4 now, since it's using addEventListener it behaves like FF 3.6, I think all browsers using addEventListener (basically every browser except IE) behaves in the same way. – Marco Demaio Commented Apr 13, 2010 at 12:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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 "onevent" attributes of the elements involved. Or you could just use jQuery or something like that, if possible and appropriate.

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

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"][].