Why JavaScript Performs “click” event, when I don't click on the item?

Question

I added eventListener on DOM object using JS , but this listeners triggers, as soon as page is loaded and it doesn't have sense, when I'm clicking on this item.

This is my code, where I'm adding eventListener to the item:

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

and my function which should be execute on item click, looks like this:

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

When browser renders page, clicking is performing itself, without my interference. Please, if anyone here knows, why it happens, write the answer.

EDIT

When I'm clicking, on table cell , nothing happens

Answer 1

I had the same problem. You need to create a function in the addEventListener and than call your method.

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

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

That should do the trick.

Answer 2

Adding my comment as an aswer here to help other beginners get into this issue. Here you have mixed both addEventListener signature and the way you add onclick handlers in HTML.

When you attach an eventListener using JS, you dont have to invoke the function(ie no need to use the parenthesis). So your code will be like this: table.rows[r].cells[2].addEventListener("click", logThis);

When you attach an event handler from HTML you do this: <td onclick="logThis()">Click me</td> Here you need to pass the string with function invocation.

Answer 3

You can also use a global event listener on your table with event delegation

 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

Despite founding of issue, why my code wasn't working, (I was invoking function) I still was not able to add eventListener to the DOM element. So, I tried to set attribute to this element using JavaScript and now it works. I'm afraid, that this is not best solution, but It is still kinda way to accomplish my aim.

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