JavaScript .addEventListener

Question

我正在将我的一些代码从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>

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

因此，我要重温一下我的主要问题：

-Why我似乎不能在addEventListener内部发送一个参数。

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

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

以及：

-Why当我单击具有特定ID的div (例如带有ID=“BranchOne”的div )时，它是否一个接一个地执行所有不同的事件，而不是只执行我的ID所涉及的事件？

Answer 1

构造

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

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

不要添加只在传递的字符串中区分的重复侦听器(这显然是元素的ID )，而是尝试如下：

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

这只是一个粗略的建议，但至少应该使用一些增强，见小提琴。

Answer 2

您可以将想要传递给函数的参数，这样当它被调用时，它已经有了那个参数集。下面是一个例子：

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

Answer 3

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

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