Javascript 如何在事件侦听器中将元素作为参数传递_Javascript_Html_Addeventlistener

Javascript 如何在事件侦听器中将元素作为参数传递

javascript html

Javascript 如何在事件侦听器中将元素作为参数传递,javascript,html,addeventlistener,Javascript,Html,Addeventlistener,我有一个程序，它有大量可重用的元素，这些元素都需要一个事件监听器。因此，我需要一种从侦听器获取元素的方法。以下是我想在代码中执行的操作： document.querySelectorAll(".class").forEach(function(el) { el.addEventListener("click", function(element/*The element that the event listener is assigned to, passed as an argume

我有一个程序，它有大量可重用的元素，这些元素都需要一个事件监听器。因此，我需要一种从侦听器获取元素的方法。以下是我想在代码中执行的操作：

document.querySelectorAll(".class").forEach(function(el) {
    el.addEventListener("click", function(element/*The element that the event listener is assigned to, passed as an argument*/) {
        console.log(element) //Print out the element that was clicked in the console
    })
})

有没有办法在JavaScript中复制这个或类似的东西？

在JavaScript中，您可以引用外部块/函数中的变量，而无需将它们传递到内部函数：

document.querySelectorAll(".class").forEach(function(el) {
  el.addEventListener("click", function(element) {
    console.log(el);
  })
});

如果触发单击的元素是

.class

本身（而不是

.class

的子体之一），则还可以使用

事件.target

来识别它：

document.querySelectorAll(".class").forEach(function(el) {
  el.addEventListener("click", function(event) {
    console.log(event.target);
  })
});

如果出于某种原因必须将元素作为参数传递给函数，而不是访问外部作用域中的元素，我想您可以使用

bind

：

document.querySelectorAll(".class").forEach(function(el) {
  el.addEventListener("click", logElement.bind(null, el));
});
function logElement(element) {
  console.log(element);
}

在Javascript中，您可以引用外部块/函数中的变量，而无需将它们传递到内部函数：

document.querySelectorAll(".class").forEach(function(el) {
  el.addEventListener("click", function(element) {
    console.log(el);
  })
});

如果触发单击的元素是

.class

本身（而不是

.class

的子体之一），则还可以使用

事件.target

来识别它：

document.querySelectorAll(".class").forEach(function(el) {
  el.addEventListener("click", function(event) {
    console.log(event.target);
  })
});

如果出于某种原因必须将元素作为参数传递给函数，而不是访问外部作用域中的元素，我想您可以使用

bind

：

document.querySelectorAll(".class").forEach(function(el) {
  el.addEventListener("click", logElement.bind(null, el));
});
function logElement(element) {
  console.log(element);
}

您可以使用

this

关键字或事件回调中的循环变量（

el

）访问单击的元素

通常首选此

，因为如果循环变量名称发生更改，您不必担心更改回调中的代码，并且它避免了在

el

周围设置闭包，这（在正确的情况下）可能会产生意外的副作用

但是，也要注意，

.queryselectoral（）

返回一个“节点列表”，而不是实际的

数组

，

。forEach（）

是一个

数组

方法。某些浏览器不支持在节点列表上调用

.forEach（）

，因此您应该将该节点列表转换为适当的

数组

，以获得最佳兼容性

//获取节点列表中的匹配节点并转换为数组
让ari=Array.prototype.slice.call（document.queryselectoral（“.test”）；
//现在，您可以安全地使用.forEach（）
ary.forEach（功能（el）{
//回调传递对触发处理程序的事件对象的引用
el.addEventListener（“点击”，函数（evt）{
//this关键字将引用已单击的元素
console.log（this.id，el）；
});
})

点击我
否，单击我
我呢？
现在，单击me

您可以使用事件回调中的

this

关键字或循环变量（

el