首页 文章

JavaScript .addEventListener

提问于
浏览 次
1

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

我通过使用两个单独的addEventListener来设置分支，其中一个执行CategoryMenu函数，其中一个在外部JS文件中设置分支，但是，我现在发现它似乎执行所有这些函数一个接一个，分支总是最终成为系列中的最后一个（BranchFour） . 最初将Branch作为CategoryMenu的参数，然后使用CategoryMenu方法在外部JS文件中设置 .

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

  • 为什么我似乎无法在addEventListener中发送参数，例如
document.getElementById('BranchFour').addEventListener("click", CategoryMenu(Branch));

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

和：

  • 为什么当我点击具有特定ID的div（例如div = ID =“BranchOne”）时，它是否一个接一个地执行所有不同的事件而不仅仅是我的ID所属的事件？
javascript function onclick addeventlistener

3 回答

  • 0

    构造

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

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

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

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

    这只是一个粗略的建议，但至少应该使用一些增强功能，see fiddle

    回复于
  • 1

    你可以__67144_你要传递给函数的参数，这样当它被调用时它已经有了这个参数集 . 这是一个例子：

    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"));
    回复于
  • 1

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

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

相关问题