为什么我的 JS 函数没有点击就自动触发？

Question

基本上我想切换“活动”类。我希望在我的 main.js 文件中包含所有与 JS 相关的代码。我的意思是我不希望我的 #readmore 按钮在其属性中包含 onClick=toggle() 。onClick 方法工作正常，切换我的“活动”类。但问题是不这样做。当我使用下面的代码时，它会自动将“活动”类添加到 .container 并且在我单击 #readmore 时不会删除。顺便说一下，我不想使用 jQuery。

我的代码：

var myBtn = document.querySelector("#readmore");

myBtn.addEventListener("click", toggle());

function toggle() {
   document.querySelector(".container").classList.toggle('active');
};

<div class="container">
<div class="content">
   <h2>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, modi! Ipsum ab non voluptas facilis maxime architecto nulla consectetur recusandae.
   </h2>
   <img src="img/img4.jpg" alt="" width="600px">
   <a href="#" id="readmore">Read More</a>
</div>

Answer 1

toggle 在附加事件侦听器时执行：

myBtn.addEventListener("click",toggle());
//                                   ^^

我们要传递函数引用：

myBtn.addEventListener("click", toggle);