attachEvent вставляет события в начало очереди, а addEventListener добавляет события в очередь. - PullRequest
Новая
       27

attachEvent вставляет события в начало очереди, а addEventListener добавляет события в очередь.

2 голосов
/ 13 апреля 2010

Я использую эту простую рабочую функцию для добавления событий: 

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 добавляет каждое новое событие в конец очереди событий, поэтому в приведенном выше примере вы получите два оповещения с надписью «load 1» «load 2».

С другой стороны IE7 attachEvent вставляет каждое новое событие в начало очереди событий, поэтому в приведенном выше примере вы получите оповещения, говорящие «load 2» «load 1».

Есть ли способ исправить это и заставить оба работать одинаково?

Спасибо!

Ответы [ 3 ]

8 голосов
/ 13 апреля 2010

В соответствии с документацией MSDN порядок выполнения с attachEvent не указан (используется слово «случайный»).Однако неудивительно, что это был бы обратный порядок вложения.

Вы могли бы вообще избежать этого и создать цепочку обработчиков, основанную на атрибутах "on event " элементовучаствует.Или вы можете просто использовать jQuery или что-то в этом роде, если это возможно и уместно.

6 голосов
/ 17 сентября 2010

Я решаю эту проблему: 

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

отлично работают

2 голосов
/ 13 апреля 2010

Вы можете «поставить в очередь» события, а затем выполнять их по массе, когда событие запускается в фиксированном порядке. 

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

это создает; 

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

затем добавляет вызов Events.run("load") для элементов onload, который выполняет итерацию и вызывает все в Event["load"][].

...