一尘不染

在动态创建的元素上添加事件侦听器

javascript

是否可以向所有动态生成的元素添加事件侦听器(Javascript)?我不是页面的所有者,因此无法以静态方式添加侦听器。

对于页面加载时创建的所有元素,我使用:

doc.body.addEventListener('click', function(e){
//my code
},true);

当页面上出现新元素时,我需要一种方法来调用此代码,但是我无法使用jQuery(在项目中无法使用elegate,on等)。我怎样才能做到这一点?


阅读 281

收藏
2020-04-25

共1个答案

一尘不染

听起来您需要执行委派策略而又不退回图书馆。我在此处的小提琴中发布了一些示例代码:

要点是使用对象target上的event来查找您感兴趣的元素,并做出相应的响应。就像是:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

小心! 示例Fiddle仅包含用于符合标准的浏览器的代码(即IE9+,以及几乎每个其他版本的代码)。如果您需要支持“旧IE”attachEvent,则还需要围绕该浏览器提供自己的自定义包装适当的本机功能。

2020-04-25