此关键字和 addEventHandler 函数存在问题

Question

我在 JS 中向 HTML 元素添加类时遇到问题。我想创建某种手风琴，但我不知道我做错了什么（首先我应该说我对 JS 没有太多经验）。这就是我使用的 HTML 元素的样子：<div class="account_content_orders_list_order">  <div class="account_content_orders_list_order_element"></div>  <div class="account_content_orders_list_order_element"></div>  <div class="account_content_orders_list_order_element"></div>  <div class="account_content_orders_list_order_element"></div>  <div class="account_content_orders_list_order_element"></div>  <div class="account_content_orders_list_order_element"></div>  <div class="account_content_orders_list_order_element"></div></div>这是我在 JS 中的脚本：  let orders = document.getElementsByClassName("account_content_orders_list_order");  for (let k = 0; k < orders.length; k++) {    orders[k].addEventListener("click", () => {      this.classList.add("active_order");    });  }但是当我单击 HTML 元素时，我在 Chrome 控制台中收到错误消息：我想检查这个关键字是否指向正确的 DOM 元素，所以我添加了console.log(this); 到我在上面向您展示的循环，但我现在知道这个指向窗口对象的关键字存在某种问题，我不知道为什么。 有人可以给点建议吗？我没主意了。对不起，如果它是重复的，我找不到任何与我相似的主题。

Answer 1

箭头函数没有自己的this. 使用标准功能：

orders[k].addEventListener("click", function () {

    this.classList.add("active_order");

});

如果你真的想使用箭头功能，你可以去event.currentTarget：

orders[k].addEventListener("click", event => {

    event.currentTarget.classList.add("active_order");

});

addEventListener()注入event.currentTarget为this.