location.reload в addEventListener

Question

Я пытаюсь перезагрузить документ при нажатии кнопки. Вот мой код:

var e = document.getElementById('a');
e.addEventListener('click',location.reload);

Возвращается Uncaught TypeError: Illegal Invocation после e была нажата. Однако следующий код работает и документ перезагружается:

var e = document.getElementById('a');//same thing
e.addEventListener('click',function(){location.reload()});
//warp location.reload inside function -> works!

Я не понимаю, почему первый код не работает. Кто-нибудь может дать какое-то объяснение? Спасибо!

Answer 1

Когда ты звонишь location.reload() он не только вызывает функцию, но и устанавливает this к стоимости locationтак что эти два эквивалентны:

location.reload();
location.reload.call(location);

Тем не менее, когда вы поставляете его addEventListener сохраняется только ссылка на функцию, но не значение thisпоэтому, когда он называется, это эквивалентно

location.reload.call(undefined); // strict mode
location.reload.call(window); // sloppy mode

Например, Firefox предоставляет более четкое сообщение об ошибке: TypeError: 'reload' called on an object that does not implement interface Location.

Таким образом, для правильного поведения вам нужно создать замыкание или связать this в locationтак что оба будут работать

e.addEventListener('click', function(){location.reload()});
e.addEventListener('click', location.reload.bind(location));

Answer 2

Вы пропустили () из вызова функции вызова в вашем первом примере. Так должно быть:

var e = document.getElementById ('a'); e.addEventListener ('щелчок',location.reload());