Проблема с MSIE и addEventListener в Javascript?

Question 1

document.getElementById('container').addEventListener('copy',beforecopy,false );

В Chrome / Safari вышеуказанное приведет к запуску функции «beforecopy» при копировании содержимого страницы. Предполагается, что MSIE также поддерживает эту функцию, но по какой-то причине я получаю такую ошибку:

«Объект не поддерживает это свойство или метод»

Насколько я понимаю, Internet Explorer не будет играть с основным узлом, но я бы подумал, что предоставление узла по идентификатору будет работать нормально. Есть ли у кого-нибудь представления о том, что я делаю не так? Заранее спасибо.

** Бонусные баллы для тех, кто может сказать мне, для чего подходит третий параметр «Ложь».

Question 2

В IE нужно использовать, attachEventа не стандарт addEventListener.

Обычная практика - проверить, addEventListenerдоступен ли метод и использовать его, в противном случае используйте attachEvent:

if (el.addEventListener){
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

Вы можете создать для этого функцию:

function bindEvent(el, eventName, eventHandler) {
  if (el.addEventListener){
    el.addEventListener(eventName, eventHandler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+eventName, eventHandler);
  }
}
// ...
bindEvent(document.getElementById('myElement'), 'click', function () {
  alert('element clicked');
});

Вы можете запустить пример приведенного выше кода здесь .

Третий аргумент addEventListenerIS useCapture; если true, это означает, что пользователь желает инициировать захват событий .

Question 3

Если вы используете JQuery 2.x, добавьте в

<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
   </head>
   <body>
    ...
   </body>
</html>

Это сработало для меня.

Question 4

попробуйте добавить

<meta http-equiv="X-UA-Compatible" content="IE=edge">

сразу после открывающего тега заголовка

Question 5

Internet Explorer (IE8 и ниже) не поддерживает addEventListener(...). У него есть собственная модель событий, использующая attachEventметод. Вы можете использовать такой код:

var element = document.getElementById('container');
if (document.addEventListener){
    element .addEventListener('copy', beforeCopy, false); 
} else if (el.attachEvent){
    element .attachEvent('oncopy', beforeCopy);
}

Хотя я рекомендую избегать написания собственной оболочки обработки событий и вместо этого использовать среду JavaScript (например, jQuery , Dojo , MooTools , YUI , Prototype и т. Д.) И избегать необходимости создавать исправление для этого самостоятельно.

Между прочим, третий аргумент в модели событий W3C имеет отношение к разнице между всплыванием и захватом событий . Практически в любой ситуации вы захотите обрабатывать события по мере их появления, а не в момент их захвата. Это полезно при использовании делегирования событий для таких вещей, как события «фокус» для текстовых полей, которые не всплывают.

Question 6

Начиная с IE11, вам нужно использовать addEventListener. attachEventустарел и вызывает ошибку.

Question 7

Как указывает здесь PPK , в IE вы также можете использовать

e.cancelBubble = true;

Question 8

Использование <meta http-equiv="X-UA-Compatible" content="IE=9">, IE9 + делает поддержку addEventListenerудалением «на» во имя события, как это:

 var btn1 = document.getElementById('btn1');
 btn1.addEventListener('mousedown', function() {
   console.log('mousedown');
 });

Question 9

Проблема в том, что в IE нет стандартного addEventListenerметода. IE использует свой собственный, attachEventкоторый делает почти то же самое.

Хорошее объяснение различий, а также 3-го параметра можно найти в quirksmode .