AddEventListener中的箭头函数不起作用

Question

HTML:

<input type="button" id="hider" value="Click to hide">

为什么这个有效：

JS:

function hide() {
this.hidden=true;
};
hider.addEventListener('click',hide);

但是，为什么这个不起作用：

hider.addEventListener('click', () => this.hidden=true);

Answer 1

因为箭头函数中的this没有指向<input>元素。它指向创建箭头函数的范围。请在MDN上阅读。

编辑：回答评论中的问题

在您的情况下，如果您想在事件侦听器中使用箭头函数，只需重用hider变量，而不是this:

hider.addEventListener('click', () => {
// use "hider" instead of "this"
hider.hidden = true;
});

进一步

如果你想创建一个"；元素不可知论者"；事件处理程序，使其成为一个更高阶的函数，将要隐藏的元素作为参数，并返回一个(此处：匿名(处理程序函数。如果这听起来很神秘，这里有一些示例代码：

const makeHideHandler = (element) => { // higher order function
return () => {                       // event handler function
element.hidden = true;             // action to perform
};
};

有了这个，您可以编写一行代码来添加监听器：

hider.addEventListener('click', makeHideHandler(hider));

如果你想知道它为什么有效，谷歌搜索"；"闭包"；。

但是，如果有多个元素应该隐藏同一个(或另一个！(元素，那么高阶函数方法的真正优势就会显现出来。考虑以下内容：

比方说，您有多个按钮，当按下这些按钮时，应该会隐藏相同的元素。用makeHideHandler:很容易

// grab all "button" elements
const hideButtons = document.querySelectorAll('.hide-button');
// grab the element to hide
const elemToHide = document.querySelector('.hide-me');
// make the handler, pass in the element that should be hidden
const hideHandler = makeHideHandler(elemToHide);
// add listeners to the buttons
hideButtons.forEach((button) => {
button.addEventListener('click', hideHandler);
});

或者在按下后创建隐藏自己的按钮：

const hideButtons = document.querySelectorAll('.hide-button');
hideButtons.forEach((button) => {
button.addEventListener('click', makeHideHandler(button)); // <-- pass in the button element
});