Question

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

这是我的代码，我要在其中添加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元素中。因此，我尝试使用attribute将JavaScript设置为此元素，现在它可以工作了。恐怕这不是最好的解决方案，但这仍然是实现我的目标的一种方式。

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)");
}

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

4 个答案: