将运行时事件附加到javascript中的动态元素？
将运行时事件附加到javascript中的动态元素？
提问于 2022-09-11 16:58:59
我在jsfiddle上创建了一个小示例：https://jsfiddle.net/0rve9cwf/
简而言之，当我动态创建一个元素并添加一个单击处理程序时，它将调用函数的结果分配给新元素，而不是在运行时调用附加函数，这不是我所期望或想要的行为。然后，当你真的点击按钮，什么都不会发生。将函数附加到应该在运行时执行的动态创建对象的最佳实践是什么？
<html lang='en'>
<head>
<title>Binding event handler dynamically</title>
</head>
<body>
</body>
</html>JavaScript
function result(val1, val2) {
console.log(`val1: ${val1}, val2: ${val2}`);
}
let btn = document.createElement('button');
btn.textContent = 'Click me';
btn.addEventListener('click', result(
'first value',
'second value'
));
let body = document.getElementsByTagName('BODY')[0];
body.append(btn);回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-11 17:04:02
您需要做的就是添加一个() =>。您需要将一个函数作为第二个参数传递给addEventListener，在您的示例中，您的函数将立即执行。
btn.addEventListener('click', () => result(
'first value',
'second value'
));Stack Overflow用户
发布于 2022-09-11 17:04:56
我希望这能解决问题
function result(val1, val2) {
console.log(`val1: ${val1}, val2: ${val2}`);
}
let btn = document.createElement('button');
btn.textContent = 'Click me';
btn.addEventListener('click', (event) => {result(
'first value',
'second value'
)});
let body = document.getElementsByTagName('BODY')[0];
body.appendChild(btn);<html lang='en'>
<head>
<title>Binding event handler dynamically</title>
</head>
<body>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73681076
复制相关文章
相似问题
腾讯云开发者
