当我不单击项目时，为什么JavaScript执行“单击”事件？

Question

我使用JS在DOM对象上添加了eventListener ，但是当我单击此项目时，一旦页面加载并且没有意义，此侦听器就会触发。

这是我的代码，在其中eventListener项目添加eventListener ：

 let table = document.getElementById('data_table' + deal);
 for (let r = 0, n = table.rows.length; r < n; r++) {
     table.rows[r].cells[2].addEventListener("click", logThis(this));
 }

我的function应该在项目单击时执行，如下所示：

 function logThis(me) {
     console.log(me);
 }

当浏览器呈现页面时，单击会自动执行，而不会受到我的干扰。 请，如果这里有人知道为什么会发生，请写下答案。

编辑

当我单击表格cell ，什么也没有发生

Answer 1

我有同样的问题。 您需要在addEventListener中创建一个函数，然后调用您的方法。

table.rows[r].cells[2].addEventListener("click", function () {logThis(this)});

function logThis(me) {
    console.log(me);
}

这应该够了吧。

Answer 2

在此处添加我的评论，以帮助其他初学者解决此问题。 在这里，您混合了addEventListener签名和HTML中添加onclick处理程序的方式。

当您使用JS附加一个eventListener时，您不必调用该函数（即，无需使用括号）。 所以您的代码将如下所示： table.rows[r].cells[2].addEventListener("click", logThis);

当您从HTML附加事件处理程序时，您可以执行以下操作： <td onclick="logThis()">Click me</td>在这里，您需要通过函数调用传递字符串。

Answer 3

您还可以在表上使用带有事件委托的全局事件监听器

 document.querySelector('#my-Table').onclick =e=>{ if ( e.target.tagName.toLowerCase() != 'td') return if ( e.target.cellIndex !=2 ) return console.clear() console.log('=>', e.target.textContent , ' is clicked !') } 

 table { border-collapse: collapse} td { border: 1px solid grey; padding: .3em .5em;} 

 <table id="my-Table"> <tbody> <tr><td>aa</td><td>bb</td><td>cc</td><td>dd</td></tr> <tr><td>ee</td><td>ff</td><td>gg</td><td>hh</td></tr> <tr><td>ii</td><td>jj</td><td>kk</td><td>ll</td></tr> </tbody> </table> <p> this get click only on row 2 ( cc / gg / kk ) </p> 

Answer 4

尽管发现了问题，但为什么我的代码无法正常工作，（我正在调用函数）我仍然无法将eventListener添加到DOM元素中。 因此，我尝试使用JavaScript将attribute设置为此元素，现在它可以工作了。 恐怕这不是最好的解决方案，但这仍然是实现我的目标的一种方法。

let table = document.getElementById('data_table' + deal);
for (let r = 0, n = table.rows.length; r < n; r++) {
     table.rows[r].cells[2].setAttribute("onclick", "logThis(this)");
}