为什么这相当于"on.("click",function)[..]"即使用纯JavaScript编写也能自动触发点击？

Question

这段代码:

var el = $(".threeLines");

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

帮助我在click事件上添加"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's "$" corresponds to 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's "$" corresponds to querySelector,我认为不是.$只是另一个名称(别名),jQuery而()后面的内容$是选择器.