学习EventTarget.addEventListener()

原创已于 2022-05-22 16:59:46 修改 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-05-22 16:47:46 首次发布

js学习之旅专栏收录该内容

3 篇文章

订阅专栏

本文通过实际代码展示了JavaScript中箭头函数在addEventListener中的this指向与普通函数的区别，并结合MDN文档深入探讨了两者在事件回调中的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于EventTarget.addEventListener()学习记录

关于回调函数中的this指向问题

this指向与使用的函数是否为箭头函数有关,见下方代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button id = 'btn'>123</button>
  </body>
</html>

<script>
  let btn = document.querySelector('#btn')
  btn.addEventListener('click',fn)

  btn.addEventListener('click',(e)=>{
    console.log(e.currentTarget);  // <button id="btn">123</button>
    console.log(this);  // this 指向window
    console.log(e.currentTarget === this);  // false
  })

  function fn (e) {
    console.log(e.currentTarget === this);  // true
    console.log(e.currentTarget);   // <button id="btn">123</button>
    console.log(this);  // <button id="btn">123</button>
  }
  </script>

链接1:事件参考 | MDN