Uncaught TypeError: незаконный вызов на addEventListener

Я получаю Uncaught TypeError: Illegal invocation для обеих версий этой попытки помещать EventListener: (я получаю ошибку, когда слушатель должен быть добавлен, а не когда я нажимаю на цель)

ronan.addEventListener("click", alert, false);

addEventListener.apply(ronan, ["click", alert, false]);

ronan - это элемент div, который успешно возвращается консолью, поэтому я не думаю, что проблема. Любые идеи, почему я получаю эту ошибку? Я прочитал этот поток, и я не мог понять этого.

Ответ 1

Вам нужно обернуть alert в функцию. Это будет работать:

ronan.addEventListener("click", function() { alert('Hi'); }, false);

Здесь fiddle для доказательства. Использование только alert не работает, так как при прослушивании слушателя значение this внутри этой функции устанавливается на объект, на котором он прослушивает. Например, если вы установите прослушиватель на ronan, внутри этого прослушивателя this === ronan. Это представляет проблему для alert, потому что эта функция ожидает, что this будет равна window. Вы можете обойти это без каламбуры, обернув функцию в другую функцию или связав ее с тем, что ожидает this:

document.body.addEventListener('click', alert.bind(window), false);

Не забывайте, что в IE < 9 вам нужно использовать attachEvent, а не addEventListener.

Замечание об использовании apply/call с addEventListener

Ваша вторая попытка не будет работать, потому что вы пытаетесь применить свои аргументы к window.addEventListener, а не к HTMLElement.prototype.addEventListener, что совсем другая функция:

// This won't work
addEventListener.apply(ronan, ["click", alert.bind(window), false]);

// This will work
HTMLElement.prototype.addEventListener.apply(ronan, ['click', alert.bind(window), false]);