javascript - 为什么 "on.("click", function) [..]"的等价物即使是用纯 JavaScript 编写的，也会自动触发单击？

Question

这段代码:

var el = $(".threeLines");

el.on("click", function(){
    $(this).toggleClass("active");
});

帮助我在单击事件上添加“active”类，以在菜单图标上创建良好的效果，如下所示:

我将代码重写为纯JS，如下:

function test_xz(s) {
    s.classList.add("active")
}
var el_container = document.getElementsByClassName("threeLines")[0];

el_container.addEventListener("click", test_xz(el_container));

但是当文档准备好时它会立即触发，并且完全困惑，如下所示:

我知道jQuery的“$”对应于querySelector，但我也尝试过，但没有成功。

经过一番研究(删除所有其他可能相关的函数，记录所有内容)，我得出结论，有问题的行是 addEventListener 本身，我写道:

el_container.addEventListener("click", console.log("Hey!"));

它只会记录“嘿!”在页面加载时。

我怎样才能做到这一点？

Answer 1

在下面的行中，您将使用参数调用方法test_xz。

el_container.addEventListener("click", test_xz(el_container));

改为更改为以下内容(不更改 test_xz 的函数定义):

el_container.addEventListener("click", function(){
    test_xz (el_container);
});

切换事件类:

function test_xz(s) {
    s.classList.toggle("active");
}

在你的问题中，你提到jQuery的“$”对应于querySelector，我认为不是。 $ 只是 jQuery 的另一个名称(别名)，$ 之后的 () 中的内容是一个选择器.