js动态创建按钮并绑定事件的问题

Question

需要拿js来渲染一个列表，组件比较多因此采取document.createElement的方式动态创建元素

let b1 = document.createElement('button')
b1.onclick=add(i)

但是这样在渲染的时候就会默认执行add方法，我希望的是点击这个按钮才执行，有人有办法吗

Answer 1

b1.addEventListener('click', add);

Answer 2

你这是受vue影响了吧，onclick=add(i)就是执行add，下面的给你几个参考

function test(...a){console.log(this, ...a)}
btn.onclick = test.bind(btn, i)
btn.onclick = function(e){test.call(this, e, 5)}
btn.addEventListener('click', test.bind(btn, 9))

Answer 3

b1.onclick = this.add.bind(this,i)