如何将javascript事件处理程序注册到尚未添加到页面的元素

我正在尝试构建一个greasemonkey脚本,该脚本将根据用户与其他动态创建的数据表交互动态创建数据表.我的问题是我每次创建一个表时都要进行两次传递：一个用于创建表,另一个用于获取表中的所有对象我想要添加事件处理程序(通过id)并添加他们的各种事件处理程序.

如果我尝试在创建表并将其插入HTML之前将onClick事件添加到表td,我会得到“组件不可用”异常.

这非常麻烦,因为我必须单独维护一个id列表以及当我第二次传递添加处理程序时应该对这些元素做什么,或者开发一个我知道的命名约定,基于id,我应该怎么做元素.

有一个更好的方法来做到这一点.我还没弄明白.有人有主意吗？

解决方法:

首先,我想知道为什么每个TD都需要不同的ID. ID是否包含重要信息,例如索引？在这种情况下,在循环中创建每个TD可能会更好.此外,显然您无法将事件处理程序附加到不存在的DOM元素！它不必注入DOM,但它必须以某种身份存在.

jQuery的live()不是一个神奇的谜,它只是使用事件委托,所以它将事件附加到父元素,如表,然后决定发生什么取决于点击的目标.这是一个基本的例子.我将一个处理程序注册到’body’元素,然后每次测试以查看目标是什么,如果它是TD元素我doSomething() – >

document.body.onclick = function(e) {

    var realTarget = e ? e.target : window.event.srcElement;

    if ( realTarget.nodeName.toLowerCase() === 'td' ) {
        doSomething();
    }

};

事件委托依赖于称为事件冒泡(或“传播”)的东西,这是现代浏览器实现事件模型的方式.触发后,每个事件都会向上移动通过DOM,直到它不再进一步发生.因此,如果您点击段落中的锚点,锚点的“点击”事件将会触发,然后该段落的“点击”事件将触发等.

标签：javascript,javascript-events,event-delegation
来源： https://codeday.me/bug/20190712/1443152.html