将事件侦听器添加到不包含'；还不存在于普通javascript中

在JQuery中，我可以执行以下操作：

$(document).on("click","a.someBtn",function(e){
    console.log("hi");
});

将事件侦听器添加到尚不存在的元素。我似乎不知道如何将事件侦听器添加到一个在普通javascript中还不存在的元素中
以下情况显然不起作用：

query.addEventListener( "click", someListener );

编辑

我想做的是通过查询选择器比较项目。我正在使用

querySelectorAll

选择尚不存在的元素。它比仅仅检查标记名更具动态性

使用

事件

对象中的属性获取单击的元素。然后，手动测试类型/属性/ID

document.addEventListener( "click", someListener );

function someListener(event){
    var element = event.target;
    if(element.tagName == 'A' && element.classList.contains("someBtn")){
        console.log("hi");
    }
}

你可以用

对调度事件的对象的引用

代码

（函数（）{
“严格使用”；
var a=document.createElement（'a'）；
a、 text内容='单击我'；
a、 href='#'；
文件.正文.附件（a）；
document.getElementsByTagName（'body'）[0]。addEventListener（'click'，函数（e）{
如果（e.target.tagName==“A”）{
警报（“点击”）；
}
}，假）；
})();这里有一个函数，可以让您添加“实时”事件，如jQuery的
.on
。可以这样调用它：

addLiveListener(scope, selector, event, function reference);

查看函数注释，了解这些参数中的每个参数的描述

/**
 * Adds a istener for specific tags for elements that may not yet
 * exist.
 * @param scope a reference to an element to look for elements in (i.e. document)
 * @param selector the selector in form [tag].[class] (i.e. a.someBtn)
 * @param event and event (i.e. click)
 * @param funct a function reference to execute on an event
 */
function addLiveListener(scope, selector, event, funct) {
  /**
   * Set up interval to check for new items that do not 
   * have listeners yet. This will execute every 1/10 second and
   * apply listeners to 
   */
  setInterval(function() {
    var selectorParts = selector.split('.');
    var tag = selectorParts.shift();
    var className;
    if (selectorParts.length)
      className = selectorParts.shift();

    if (tag != "") {
      tag = tag.toUpperCase();
      var elements = scope.getElementsByTagName(tag);
    } else
      var elements = scope.getElementsByClassName(className);

    for (var i = 0; i < elements.length; i++) {
      if (elements[i][event + '_processed'] === undefined && (tag == "" || elements[i].tagName == tag)) {
        elements[i].addEventListener(event, funct);
      }
    }
  }, 1000);
}




您想要的是使用DOM MutationObserver事件来应用addEventListener。我认为，自2012年以来，所有主流浏览器都可以使用此DOM API

我用它来降低由他们的代码片段（）创建的谷歌翻译栏。由于它动态地创建元素（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);

您可以在这里了解更多信息：
您能更好地解释一下您想做什么吗？你说的“香草javascript”是什么意思？我想你是在问如何为动态创建的HTML元素编写一个事件？“香草javascript”通常意味着没有框架，尽管启用它基本上意味着没有框架jquery@Kathy这意味着没有框架。@Johnston，我认为queryselector部分应该有一个新问题。是否可以将e.target与查询选择器进行比较？@Johnston，是的，您可以can@Satpal，className.indexOf可能会失败，如果碰巧有一个类包含搜索到的类名，但不包含搜索到的类，为什么要使用setInterval检查更改？这不会改善你的代码吗？它在仍然广泛使用的旧浏览器（如IE10）中不受支持。回到2020年，MutationObserver是一个不错的选择；这只适用于IE10+并且在Edge之前有一些限制
//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);