为什么这相当于＆＃34; on。（＆＃34;点击＆＃34;，功能）[..]＆＃34;即使用纯JavaScript编写，也会自动触发点击？

Question

此代码：

var el = $(".threeLines");

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

帮助我添加课程＆＃34;活跃＆＃34;在click事件上为菜单图标创建一个很好的效果，如下所示：

我将代码重写为纯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!"));

它只会记录＆＃34;嘿！＆＃34;在页面加载。

我该如何做到这一点？

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的另一个名称（别名），()之后$内的内容是选择器。

Answer 2

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

你正在调用 text_xz()。这就是处理程序正在执行的原因。出于同样的原因，将console.log("Hey!")日志传递给控制台。

要自行传递处理程序而不调用它，只需传递处理程序名称：

el_container.addEventListener("click", test_xz);

此外，您错误地将toggleClass()移至classList.add()而非classList.toggle()：

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