JavaScript 事件目标答案

【问题标题】：JavaScript event targetJavaScript 事件目标
【发布时间】：2017-02-19 20:49:37
【问题描述】：

我对事件目标有疑问。我想检查单击了哪个元素，但它不起作用。这个问题有什么解决办法？

var prod = document.querySelectorAll("button");

function dodaj(e) {
    var tar = e.target;
    
    console.log(tar);
}


for(var i = 0; i < prod.length; i++) {
    prod[i].addEventListener("click", function() {
       dodaj(); 
    }, false);
}

【问题讨论】：

试试：prod[i].addEventListener("click", function(e) { dodaj(e); }, false);

标签： javascript events target

【解决方案1】：

您没有向dodaj 传递任何内容。您可以将dodaj 直接传递给addEventListener。

prod[i].addEventListener("click", dodaj, false);

【讨论】：

【解决方案2】：

问题是您的单击事件处理程序是一个匿名函数，它正在调用执行工作的实际函数 (dodaj)，并且该函数没有接收到对事件的引用 - 匿名函数是.

您可以更改匿名函数，使其接收事件，然后将其传递给dodaj，如下所示：

prod[i].addEventListener("click", function(evt) {
   dodaj(evt); 
}, false);

但是，由于该“包装器”函数实际上并没有为您的代码添加任何值，因此您可以/应该完全删除它，只需将实际的回调函数注册为点击事件处理程序。

var prod = document.querySelectorAll("button");

function dodaj(e) {  
    console.log(e.target);
}

for(var i = 0; i < prod.length; i++) {
  // When any button gets clicked, call the dodaj function
  // directly. This is the function that will receive a 
  // reference to the click event.
  prod[i].addEventListener("click", dodaj);
}

<button id="one">Click Me</button>
<button id="two">Click Me</button>
<button id="three">Click Me</button>
<button id="four">Click Me</button>

【讨论】：