您可以使用事件委托来解决这个问题。事件委托用于处理动态添加的元素,即元素在页面加载时不存在,但稍后可能会添加到DOM中。在委托中,我们将事件绑定到表示静态父元素的元素,然后使用选择器参数选择需要触发事件的子元素。这将确保事件在将来添加到DOM时仍然可以正常工作。下面是一个示例:
HTML:
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
Row 3, Column 1
Row 3, Column 2
JavaScript:
// 通过委托将事件绑定到父元素
document.getElementById("myTable").addEventListener("mouseenter", function(event) {
// 检查事件是否激活了table的一个行
if (event.target.tagName === "TR") {
// 执行行级事件代码,例如:
event.target.style.backgroundColor = "red";
}
});
此代码将为表格的所有行添加一个“mouseenter”事件,即使是在表格加载后添加新行时也能正常工作。