addEventListener 行为异常

Question

我最近开始学习 dom。我打算制作一个网站，点击这些按钮后会有几个按钮，该网站会发出鼓声（不同按钮的鼓声不同）。

所以，我想在 js 中试验 this 关键字。据我所知this应该return对象的名称。

所以，我希望这段代码 return 我 button 对象，但它 returns Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

这是我的 js 文件 -

var buttons = document.querySelectorAll('.drum')
console.log(buttons)
buttons.forEach(button => button.addEventListener('click', () =>{
    console.log(this)
}
))

但奇怪的是，下面的代码给了我想要的对象，即给了 button 像这样的对象 -

<button class = "a drum">w</button>

这是与此结果关联的代码 -

var num = document.querySelectorAll('.drum').length

for (var i = 0; i < num ; i++){
    document.querySelectorAll('.drum')[i].addEventListener('click', function(){
        console.log(this);
    })
}

据我所知，它们都是相同的代码，只是编写方式不同。所以，请解释为什么我会出现这种行为。

如果有人感兴趣，这里是 html 文件 -

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>

  <h1 id="title">Drum  Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>


  <script src="./index.js"></script>
</body>

</html>

任何帮助是appreciated.Thanks。

Answer 1

箭头函数没有自己的 this 而以“经典”方式声明的函数有。

这样，在第一个示例中，回调从外部范围（恰好是 window）继承 this。这个特定的主题 is also detailly explained at MDN，因此，我建议您查看它以获取更多信息。

addEventListener 行为异常

addEventListener behaving weirdly

html

javascript

jquery

event-handling