eventlistener无需点击即可运行

Question

document.getElementById("hit").addEventListener("click",console.log('test'))

我有那行代码，点击是按钮的ID：<button id = "hit" value="Hit">Hit</button>在控制台中刷新页面输出“测试”，我不知道为什么。

Answer 1

将参数传递给函数时，将立即调用它。您需要传递一个将等待事件的函数，然后使用指定的参数调用console.log。

document.getElementById("hit").addEventListener("click",() => console.log('test'))

Answer 2

addEventListener("click",console.log('test'))将立即运行console.log('test')并传递返回值console.log。返回值是不确定的，因此您的代码与此等效：

document.getElementById("hit").addEventListener("click", undefined);
console.log('test');

OR

const consoleReturnValue = console.log('test'); // will be undefined
document.getElementById("hit").addEventListener("click", consoleReturnValue );

我认为您要实现的目标是

addEventListener("click", () => console.log('this'));

或者，如果您不能使用ES6：

addEventListener("click", console.log.bind(window, 'this'));

在这种情况下，您实际上将function作为第二个参数而不是undefined原始变量。

---

事实，将undefined作为参数传递与不传递它相同，因此您当前的addEventLinster调用与以下内容相同：

document.getElementById("hit").addEventListener("click");
console.log('test');

Answer 3

在事件监听器中，使用带有参数的函数将自动运行该函数，请尝试使用此函数。

document.getElementById("hit").addEventListener("click", function (){ console.log('test'); });