Проблема MSIE та addEventListener у Javascript?

Question 1

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

У Chrome / Safari вищезапущена функція "beforecopy" під час копіювання вмісту на сторінці. MSIE також повинен підтримувати цю функціональність, але я чомусь отримую таку помилку:

"Об'єкт не підтримує цю властивість або метод"

Зараз я розумію, що Internet Explorer не буде грати з основним вузлом, але я міг би подумати, що надання вузла за ідентифікатором буде працювати нормально. Хтось має якісь уявлення про те, що я роблю не так? Заздалегідь спасибі.

** Бонусні бали для тих, хто може сказати мені, для чого корисний 3-й параметр "False".

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-го параметра можна знайти в дивовижному режимі .