Question

向原始 JavaScript 中尚不存在的元素添加事件监听器

2015-06-02

35916

javascript jquery

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

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

向尚不存在的元素添加事件侦听器。我似乎无法弄清楚如何在 vanilla javascript 中向尚不存在的元素添加事件侦听器。
以下操作显然不起作用：

query.addEventListener( "click", someListener );

编辑

我想要做的是通过查询选择器比较项目。我正在使用 querySelectorAll 选择尚不存在的元素。它比仅检查标签名称更具动态性。

Answer 1

使用 event 对象中的 target 属性获取被点击的元素。然后，手动测试 type/attributes/ids

document.addEventListener( "click", someListener );

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

Answer 2

您可以使用 event.target

A reference to the object that dispatched the event.

代码

(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);
})();

Answer 3

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

我使用它来降低由他们的代码片段创建的谷歌翻译栏（ https://www.w3schools.com/howto/howto_google_translate.asp ）。由于它动态创建元素（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