是否可以在所有动态生成的元素上添加事件监听器(Javascript)?由于不是该页面的所有者,所以我无法以静态方式添加侦听器。
对于页面加载时创建的所有元素,我使用以下代码:
doc.body.addEventListener('click', function(e){
//my code
},true);
我需要一种方法,在页面上出现新元素时调用此代码,但我不能使用jQuery(委托、on等在我的项目中无法工作)。我该怎么做?
是否可以在所有动态生成的元素上添加事件监听器(Javascript)?由于不是该页面的所有者,所以我无法以静态方式添加侦听器。
对于页面加载时创建的所有元素,我使用以下代码:
doc.body.addEventListener('click', function(e){
//my code
},true);
我需要一种方法,在页面上出现新元素时调用此代码,但我不能使用jQuery(委托、on等在我的项目中无法工作)。我该怎么做?
看起来你需要采用委托策略而不是回退到库。我在这里发布了一些示例代码:http://jsfiddle.net/founddrama/ggMUn/
要点是使用event
对象上的target
来查找你感兴趣的元素,并作出相应的响应。类似于:
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
}
});
注意事项!这个示例代码只包括标准兼容的浏览器(例如IE9+以及每个其他版本)。如果您需要支持“旧版IE”的attachEvent
,那么您需要提供自己的包装器来包含适当的本地函数。有很多关于此问题的好讨论;我喜欢Nicholas Zakas在他的书《Web开发者专业JavaScript》中提供的解决方案。
取决于您如何添加新元素。
如果您使用createElement
添加,您可以尝试以下方法:
var btn = document.createElement("button");
btn.addEventListener('click', masterEventHandler, false);
document.body.appendChild(btn);
然后你可以使用masterEventHandler()
来处理所有的点击事件。
new MutationObserver(function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
// put your own source code here
}
}
}).observe(document.body, {childList: true, subtree: true});
z-index:-1
;jQuery.on()
。Element.matches()
方法来检查目标是否与给定选择器字符串匹配。addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
console.log('Clicked', e.target.innerText);
});
let myEvnt = document.createElement('span');
myEvnt.setAttribute('class', 'someClass');
myEvnt.addEventListener('click', e => {
if(event.target.classList.contains('someClass')){
console.log(${event.currentTarget.classList})
}})
var delegate = new Delegate(document.body);
delegate.on('click', 'button', handleButtonClicks);
// Listen to all touch move
// events that reach the body
delegate.on('touchmove', handleTouchMove);
});
使用 classList
属性一次绑定多个类
var container = document.getElementById("table");
container.classList.add("row", "oddrow", "firstrow");
body
元素(例如作为onclick
属性),否则会有破坏已经存在的监听器的风险。事件委托策略更加安全:不太可能干扰或覆盖元素上的其他监听器,并且不太可能使用每个元素的监听器来占用内存。 - founddramadocument.body === document.querySelector('body')
吗?这就是为什么在两种情况下你总是将点击处理程序附加到唯一的 body 元素。 - drinchevdocument.querySelector()
版本,因为这样更容易概括 —— 也就是说,并不是每个元素都可以从文档中作为属性访问到。 - founddramafocus
,似乎不起作用。我该怎么办? - ColorWin