JS为<td>标签绑定点击事件时自动执行问题修复方法

addEventListener的第二个参数需要接收函数引用，你写的viewUserComplaints()带了调用括号，代码执行到这一行时会立刻运行viewUserComplaints函数，再把函数的返回值（你的函数没有写返回值，实际传进去的是undefined）绑定给点击事件，自然会出现页面一加载函数就自动执行、点击反而不触发对应逻辑的问题。

绑定事件时去掉函数名后面的括号，只传入函数本身的引用，这样只有点击<td>标签时，浏览器才会调用这个函数。

修复后可正常运行的代码：

document.querySelector('td').addEventListener('click', viewUserComplaints)

function viewUserComplaints() {
    console.log('test')
}

补充说明：如果调用viewUserComplaints时需要传入自定义参数，不能直接写viewUserComplaints(参数)，否则还是会出现页面加载就立即执行的问题，这种场景需要在外层包一个匿名函数做触发中转：

// 普通函数写法
document.querySelector('td').addEventListener('click', function() {
  viewUserComplaints(自定义参数1, 自定义参数2)
})

// 箭头函数写法
document.querySelector('td').addEventListener('click', () => {
  viewUserComplaints(自定义参数1, 自定义参数2)
})

内容的提问来源于stack exchange，提问作者Yassin Sherif Mohamed