通常这种情况是由于绑定事件的元素不存在或者元素还未加载完成的情况下就执行了脚本。解决方法是将脚本放在页面DOM加载完成后再绑定事件,或者使用事件委托的方式绑定事件。以下是一个使用事件委托的示例代码:
HTML代码:
- 项目1
- 项目2
- 项目3
JavaScript代码:
document.getElementById('list').addEventListener('click', function(e) {
if (e.target && e.target.nodeName.toUpperCase() === 'LI') {
console.log('点击了项目:', e.target.textContent);
}
});
上述代码将事件委托给了包含所有项目的
元素,当点击元素时,事件将冒泡到
元素上,从而执行代码并输出被点击的项目的文本内容。