如何将参数传递给事件侦听器的函数，以便不会出现重复的事件侦听器？
如何将参数传递给事件侦听器的函数，以便不会出现重复的事件侦听器？
提问于 2022-08-03 18:02:38
目前，我使用以下解决方案：
<button onclick="initiate('ok2')" id="btn1">Initiate</button>
<button id="btn2">Send data</button>function initiate(ok) {
document.getElementById("btn2").addEventListener("click", receiveData);
}
function receiveData(event) {
console.log(event);
}这种方法的好处在于命名函数receiveData，它被确认为相同的函数，并且不会重复添加。
复制步骤：
- 多次按“启动”按钮
- 按“发送数据”
结果:控制台日志只打印一次
我想使用同样的方法，但是要向函数添加一个属性。我尝试了绑定方法，但是事件侦听器被添加了多次。因此，控制台日志也会多次打印。
示例：
function initiate(ok) {
document.getElementById("btn2").addEventListener("click", receiveData.bind(null, ok));
}
function receiveData(event, ok) {
console.log(event);
console.log(ok);
}是否可以将参数传递给函数而不创建重复的事件侦听器？理想情况下，最好不要删除事件侦听器，就像在当前解决方案中一样。
回答 4
Stack Overflow用户
发布于 2022-08-03 19:26:44
下面是我的版本，提供了委派、设置和获取数据属性的推荐方法
用户无法单击不可见的按钮，因此不需要启动按钮，只需将其解除。
document.addEventListener("click", function(e) {
let btn = e.target
if (btn.matches("#btn1")) {
let targetBTN = document.getElementById(btn.dataset.target);
targetBTN.hidden = false;
} else if (btn.matches("#btn2")) {
console.log(btn.dataset.field);
}
});<button id="btn1" data-target="btn2">Initiate</button>
<button id="btn2" data-field="ok2" hidden>Send data</button>
Stack Overflow用户
发布于 2022-08-03 18:11:00
// when the window loads add a click handler to the button of choice
window.addEventListener('load', (event) => {
console.log('page is now loaded');
document.getElementById("btn2").addEventListener("click", receiveData)
});
function receiveData(event) {
console.log(event);
}或者按照注释中的建议，将单击处理程序内联。
Stack Overflow用户
发布于 2022-08-03 18:13:38
你需要告诉它如果它被输入或没有..。
let data = "";
let init = true;
function initiate(ok) {
data = ok
if(init ){
document.getElementById("btn2")
.addEventListener("click", receiveData);
init = false
}
}
function receiveData(event) {
console.log( data );
}<button onclick="initiate('ok2')" id="btn1">Initiate</button>
<button id="btn2">Send data</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73225875
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号