Почему JavaScript выполняет событие "click", когда я не нажимаю на элемент?

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

и my function, которые должны выполняться при щелчке элемента, выглядят так:

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

Когда браузер отображает страницу, нажатие выполняется само, без моего вмешательства. Пожалуйста, если кто-то здесь знает, почему это происходит, напишите ответ.

EDIT

Когда я нажимаю на таблицу cell, ничего не происходит

Answer 1

Добавление моего комментария в качестве ответа здесь, чтобы помочь другим новичкам войти в эту проблему.Здесь вы смешали сигнатуру addEventListener и способ добавления обработчиков onclick в HTML.

Когда вы присоединяете EventListener с помощью JS, вам не нужно вызывать функцию (т.е. не нужно использовать скобки).Таким образом, ваш код будет выглядеть так: table.rows[r].cells[2].addEventListener("click", logThis);

Когда вы присоединяете обработчик событий из HTML, вы делаете это: <td onclick="logThis()">Click me</td> Здесь вам нужно передать строку с вызовом функции.

Answer 2

Вы также можете использовать глобальный прослушиватель событий для вашей таблицы с делегированием событий

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 3

У меня была такая же проблема. Вам нужно создать функцию в addEventListener и затем вызвать ваш метод.

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

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

Это должно сработать.

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