在JQuery中,我可以这样做:
$(document).on("click","a.someBtn",function(e){
console.log("hi");
});
将事件侦听器添加到尚不存在的元素。我似乎不知道如何将事件侦听器添加到一个尚不存在于中的元素中。
以下内容显然不起作用:
query.addEventListener( "click", someListener );
编辑
我想做的是通过查询选择器来比较项目。我正在选择querySelectorAll
中还不存在的元素。它比仅仅检查标签名更动态一些。
发布于 2015-06-02 16:33:17
使用目标对象中的event
属性获取单击的元素。然后,手动测试类型/属性/ids
document.addEventListener( "click", someListener );
function someListener(event){
var element = event.target;
if(element.tagName == 'A' && element.classList.contains("someBtn")){
console.log("hi");
}
}
发布于 2015-06-02 16:44:25
您可以使用event.target
对发送事件的对象的引用。
代码
(function () {
"use strict";
document.getElementsByTagName('body')[0].addEventListener('click', function(e) {
if (e.target.tagName == 'A' && e.target.classList.contains("someBtn")) {
alert('Clicked');
}
}, false);
})();
(function() {
"use strict";
var a = document.createElement('a');
a.textContent = 'Click Me';
a.href = '#';
document.body.appendChild(a);
document.getElementsByTagName('body')[0].addEventListener('click', function(e) {
if (e.target.tagName == 'A') {
alert('Clicked');
}
}, false);
})();
发布于 2018-05-12 02:38:27
您想要的是使用DOM MutationObserver事件应用addEventListener。我认为,自2012年以来,这个DOM在所有主要浏览器上都可以使用。
我用它来降低他们的代码片段(translate.asp)创建的google栏。因为它动态地创建元素( iframe),所以它也有相同的问题。只需根据需要更改回调函数和变量即可。
//Observer for Google translator bar creation and action to move to bottom
// Select the nodetree that will be observed for mutations
var nodetree = document.getElementsByTagName("body")[0];
// Select the target node atributes (CSS selector)
var targetNode = "iframe.goog-te-banner-frame";
// Options for the observer (which mutations to observe)
var config = { attributes: false, childList: true };
// Callback function to execute when mutations of DOM tree are observed
var lowerGoogleTranslateBar = function(mutations_on_DOMtree) {
for(var mutation of mutations_on_DOMtree) {
if (mutation.type == 'childList') {
console.log(mutation);
if (document.querySelector(targetNode) != null) {
//40px is the height of the bar
document.querySelector(targetNode).style.setProperty("top", "calc(100% - 40px)");
//after action is done, disconnect the observer from the nodetree
observerGoogleTranslator.disconnect();
}
}
}
};
// Create an observer instance linked to the callback function
var observerGoogleTranslator = new MutationObserver(lowerGoogleTranslateBar);
// Start observing the target node for configured mutations
observerGoogleTranslator.observe(nodetree, config);
您可以在这里了解更多有关此问题的信息:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
https://stackoverflow.com/questions/30601620
复制相似问题