为什么这相当于；打开。（“单击”，函数）[…]“；即使使用纯JavaScript编写，也会自动触发单击？

此代码：

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!"));

它只会在页面加载中记录“嘿！”

---

我怎样才能做到这一点呢？

在下面的一行中，您正在使用一个参数调用方法

test\uxz

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

相反，更改为以下内容（不更改

test\u xz

的函数定义）：

要切换活动类，请执行以下操作：

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

在您的问题中，您提到了

jQuery的“$”对应于querySelector

，我认为它不是。

$

只是

jQuery

的另一个名称（别名），在

$

之后的

（）

中的是一个选择器

您正在调用

text\u xz（）

。这就是处理程序正在执行的原因。这与传递

console.log（“嘿！”）

将该字符串记录到控制台的原因相同

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

el_container.addEventListener("click", test_xz);

此外，您错误地将

toggleClass（）

移植到

classList.add（）

而不是

classList.toggle（）

：

---

test_xz（el_container）

调用

text_xz（）

函数，将其返回值传递给

.addEventListener（）

。这仅仅是因为纯javascript代码是不等价的-如果您将jQueery代码更改为

el.on（“click”，$（el）.toggleClass（“active”）

则这两个代码段都将是错误的，或者更好的是，

el_container.addEventListener（“click”，test_xz）

，因为函数中已通过

this

提供了对已单击元素的引用，因此不需要函数参数。可以工作，我可以理解原因。不幸的是，我需要它删除“活动”一旦再次点击，我该怎么做？@nnnnnn你是对的。我不想更改OP在其博文中编写的

test_xz

。@DanielMoss更改

s.classList.add（“active”）

到

s.classList.toggle（“active”）

切换

活动的
classI想到了这一点，但我需要函数的参数，有什么想法吗？Daniel-出于此目的，您不需要参数，因为在函数
中，此
将引用单击的元素，因此更改
text\u xz
以相应地工作。请更正@nnnnnn，我正在尝试将el\u容器（只是一个getCassByName）传递给该
text\u xz
函数，一种方法是放置
el_container.classList.add（“active”）在
text\u xz
函数本身中。在
text\u xz
中，您可以说
这个.classList.toggle（“活动”）
。您不需要参数，因为
此
将被设置为引用元素（
addEventListener（）
为您执行此操作）。已修复。更改为
切换
，以下是我当前的代码：
el_container.addEventListener("click", test_xz(el_container));

el_container.addEventListener("click", test_xz);

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