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.

上了解它

编辑：评论中问题的答案

在你的例子中，如果你想在事件侦听器中使用箭头函数，只需 re-use hider 变量而不是 this:

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

更进一步

如果您想创建一个“element-agnostic”事件处理程序，请将其设为高阶函数，将要隐藏的元素作为参数接收，并且 returns 一个（此处：匿名）处理函数。如果这对您来说听起来很神秘，这里有一些示例代码：

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

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

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

如果你想知道它为什么有效，google“闭包”。

但是，如果您有多个应该隐藏相同（或其他！）元素的元素，那么高阶函数方法的真正优势就会显现出来。考虑以下因素：

比方说，您有多个按钮，当按下这些按钮时，应该隐藏 same 元素。 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
});

AddEventListener 中的箭头函数不起作用

Arrow function in AddEventListener not working

javascript

hide

addeventlistener

arrow-functions