javascript 单击目标如何在我的事件侦听器中提供单击的按钮?

yrdbyhpb  于 2023-04-28  发布在  Java
关注(0)|答案(2)|浏览(163)

在这里,我将遍历一个按钮数组,并在每个按钮上创建一个EventListener。在这些EventListeners中,我创建了一个匿名函数,它接受一个参数evt。
我不明白JavaScript是如何允许我使用x.target来引用被单击的按钮的。

export function ajoutListenersAvis() {
  const piecesElements = document.querySelectorAll(".fiches article button");
  for (let i = 0; i < piecesElements.length; i++) {
    piecesElements[i].addEventListener("click", function(x) {
      const id = x.target.dataset.id;
      fetch(`http://localhost:8081/pieces/${id}/avis`);
    });
  }
}
oknwwptz

oknwwptz1#

在代码的上下文中,x实际上是一个事件对象,表示单击按钮时触发的事件。在本例中,它是click事件。
当您使用addEventListener定义事件侦听器时,作为第二个参数传递的函数将自动传递一个事件对象作为其第一个参数。这就是为什么你可以在匿名函数中引用x
代码中的x.target引用了被单击的按钮元素,因为target是事件对象的一个属性,它指向触发事件的DOM元素。由于您将事件侦听器附加到button元素,因此x.target将始终引用被单击的button元素。

7rtdyuoh

7rtdyuoh2#

虽然人们已经以技术的方式回答了这个问题,但这里有一个最基本格式的视觉表示。
你可以按照自己的意愿引用传递给函数的参数。它不会改变论点的内容,只是你如何引用它。

const taco = "Pizza";

function test(cheese){
  console.log(cheese)
}

test(taco)

相关问题