當我不單擊項目時，為什么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)");
}