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）。本来Branch是作为CategoryMenu的参数，然后在外部JS文件中使用CategoryMenu方法设置的。

所以回顾一下我的主要问题：

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

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

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

和：

-为什么当我单击具有特定 ID 的 div（例如具有 ID="BranchOne" 的 div）时，它会一个接一个地执行所有不同的事件而不是只是我的 ID 所属的那个吗？

Answer 1

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

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

Answer 2

您可以 bind 您想要传递给函数的参数，这样当它被调用时它已经设置了该参数。这是一个例子：

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

结构

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

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

与其添加只区分传递的字符串（显然是元素的 ID）的重复侦听器，不如试试这个：

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

这只是一个粗略的建议，但至少应该可以进行一些改进，see fiddle

JavaScript.addEventListener

JavaScript .addEventListener

javascript

function

onclick

addeventlistener