Javascript addEventListener

我正在将我的一些代码从onClick更改为addEventListener，这是因为我读到了各种好处，也是为了分离关注点。然而，我遇到的一个问题是，尽管使用onClick，我能够调用函数并传递参数，但我现在发现，如果我在使用addEventListener时尝试传递参数，那么函数会立即使用给定的参数执行

<!-- Choose Branch and Open Menu -->
    <script type="text/javascript">

    document.getElementById('BranchOne').addEventListener("click", setBranch("BranchOne"));
    document.getElementById('BranchOne').addEventListener("click", CategoryMenu);

    document.getElementById('BranchTwo').addEventListener("click", setBranch("BranchTwo"));
    document.getElementById('BranchTwo').addEventListener("click", CategoryMenu);

    document.getElementById('BranchThree').addEventListener("click", setBranch("BranchThree"));
    document.getElementById('BranchThree').addEventListener("click", CategoryMenu);

    document.getElementById('BranchFour').addEventListener("click", setBranch("BranchFour"));
    document.getElementById('BranchFour').addEventListener("click", CategoryMenu);

    function CategoryMenu() {
        document.getElementById('CategoryMenu').style.display = "block";
    }
    </script>

document.getElementById（'BranchOne'）。addEventListener（“单击”，setBranch（“BranchOne”）；
document.getElementById（'BranchOne'）。addEventListener（“单击”，类别菜单）；
document.getElementById（'BranchTwo'）。addEventListener（“单击”，setBranch（“branchtw”）；
document.getElementById（'branchtw'）。addEventListener（“单击”，类别菜单）；
document.getElementById（'BranchThree'）。addEventListener（“单击”，setBranch（“BranchThree”）；
document.getElementById（'BranchThree'）。addEventListener（“单击”，类别菜单）；
document.getElementById（'BranchFour'）。addEventListener（“单击”，setBranch（“BranchFour”）；
document.getElementById（'BranchFour'）。addEventListener（“单击”，类别菜单）；
函数CategoryMenu（）{
document.getElementById（'CategoryMenu'）.style.display=“block”；
}

我转而使用两个单独的AddEventListener设置分支，其中一个执行CategoryMenu函数，另一个在外部JS文件中设置分支，我现在发现它似乎一个接一个地执行所有这些功能，并且分支始终是系列中的最后一个（BranchFour）。最初，分支作为CategoryMenu的参数，然后使用CategoryMenu方法在外部JS文件中设置

因此，我想回顾一下我的主要问题：

-为什么我似乎不能在addEventListener内部发送参数，例如

document.getElementById('BranchFour').addEventListener("click", CategoryMenu(Branch));

        function CategoryMenu(Branch) {
            document.getElementById('CategoryMenu').style.display = "block";
        }
        </script>

document.getElementById（'BranchFour'）.addEventListener（“单击”，类别菜单（分支））；
功能类别菜单（分支）{
document.getElementById（'CategoryMenu'）.style.display=“block”；
}

以及：

---

-为什么当我单击具有特定ID的div（例如，具有ID=“BranchOne”的div）时，它会一个接一个地执行所有不同的事件，而不仅仅是与我的ID相关的事件？

使用匿名函数包装参数化函数：

myElement.addEventListener('click', function() {
    setBranch('BranchOne');
});

您可以选择要传递给函数的参数，以便在调用该函数时，它已经设置了该参数。下面是一个例子：

function sayHello(name, surname) {
    console.log("Hello " + name + " " + surname + "!");
}

var foo = sayHello.bind(null, "John");

foo("Doe"); // Hello John Doe!

在您的特定情况下，您可以执行以下操作：

document.getElementById('BranchTwo').addEventListener("click", setBranch.bind(null, "BranchTwo"));

构造

 document.getElementById('BranchOne').addEventListener("click", setBranch("BranchOne"));

将函数

setBranch

的结果作为第二个参数传递给事件侦听器（这当然会导致错误，因为它不是函数）

不要添加只在传递的字符串（显然是元素的ID）中进行区分的重复侦听器，请尝试以下操作：

document.getElementById('BranchOne').addEventListener("click", function(event) { 
  setBranch(event.target.id);
});

这只是一个粗略的建议，但至少应该与一些增强一起工作，可能，

应该是

setBranch（未定义，'BranchTwo'）

或者类似的东西。第一个参数是

此

参考。