我正在将我的一些代码从 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的参数,然后通过CategoryMenu方法在外部JS文件中设置的。
所以回顾一下我的主要问题:
-为什么我似乎不能在 addEventListener 内部发送参数,例如
document.getElementById('BranchFour').addEventListener("click", CategoryMenu(Branch));
function CategoryMenu(Branch) {
document.getElementById('CategoryMenu').style.display = "block";
}
</script>
和:
- 为什么当我单击具有特定 ID 的 div(例如 ID="BranchOne"的 div)时,它会一个接一个地执行所有不同的事件,而不是仅执行与我的 ID 相关的事件?
最佳答案
结构
document.getElementById('BranchOne').addEventListener("click", setBranch("BranchOne"));
将函数 setBranch
的结果作为第二个参数传递给事件监听器(这当然会导致错误,因为它不是函数)。
与其添加只区分传递的字符串(显然是元素的 ID)的重复监听器,不如试试这个:
document.getElementById('BranchOne').addEventListener("click", function(event) {
setBranch(event.target.id);
});
这只是一个粗略的建议,但至少应该可以进行一些增强,see fiddle
关于JavaScript .addEventListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29198250/