创建元素，然后立马绑定事件？

Question

我想请教一个问题，就是创建一个很复杂的元素，浏览器渲染需要2秒，然后绑定事件，绑定的事件是否会生效？

$(document.body).append('<div id="test"></div>')
$('#test').on('click',function(){}) // 此处代码会不会因为 ‘test’元素过于复杂，浏览器没渲染完成，然后就给元素绑定了事件，造成事件绑定不成功

Answer 1

我建议通过createElement来创建元素，然后通过addEventListener绑定事件，这样在还没append到页面之前，也就是还未渲染到页面就可以绑定事件了

const div = document.createElement('div')
div.id = 'test'
div.addEventListener('click', function(){})
document.body.append(div)

Answer 2

理论上不会，因为渲染过程会阻塞 JS 执行，所以绑定事件时，DOM 已经就位了，就可以正常绑定。

当然，也可以利用事件冒泡的特性，在上层节点侦听事件。通常来说，更推荐这种做法。