JavaScript中如何为动态创建的元素绑定运行时事件？

我动态创建元素并添加点击事件处理函数时，程序直接把函数调用后的结果赋值给了新元素，而非在点击时才调用绑定的函数，导致点击按钮毫无反应。请问为动态创建的对象绑定需在运行时执行的函数的最佳实践是什么？

相关代码 #

HTML #

<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);

问题根源 #

当前代码里，result('first value', 'second value')是立即执行函数，会把函数执行后的返回值（此处result无返回值，即undefined）传给addEventListener，所以点击按钮时没有任何响应。正确的做法是传递一个函数引用，让点击事件触发时再执行目标函数。

最佳实践方案 #

1. 匿名函数包裹 #

用匿名函数封装目标函数调用，确保点击时才执行：

btn.addEventListener('click', function() {
    result('first value', 'second value');
});

2. bind()绑定参数 #

如果需要保留原函数引用并提前绑定参数，可使用bind()方法，它会返回一个新函数，点击时自动调用原函数并传入预设参数：

btn.addEventListener('click', result.bind(null, 'first value', 'second value'));

注：第一个参数为this指向，若函数内无需使用this，传null或undefined即可。

3. ES6箭头函数 #

箭头函数写法更简洁，效果与匿名函数一致：

btn.addEventListener('click', () => result('first value', 'second value'));

内容的提问来源于stack exchange，提问作者Jeremy Koppel