javascript - 如何在没有 jQuery 或 zepto 的情况下处理动态创建元素的事件？

Question

我知道 jquery 或 zepto $(selctor).on(event, handler) 会触发动态创建元素的事件。但我不使用 jquery 和 zepto。我想从头开始编写我的代码以用于学习和轻量级。

我的代码中有很多 sth.innerHTML=blabla 和 sth.appendChild(..) 片段。我必须将事件绑定(bind)到它们。

更新:

我想要这样一个简单的函数，

function $on(selector, eventType, handler) {
    document.querySelectAll(selector).forEach(function(el) {
        el.addEventListener(eventType, handler);
    });
    // on new DOM insert or replaced, let us call it newDom
      newDom.querySelectAll(selector).forEach(function(el) {
          el.addEventListener(eventType, handler);
      });
}

但我不知道jquery是不是这样工作的，我想知道它，并完成我的功能。

Answer 1

这是一个使用较新的 MutationObserver 的示例MDN 文档推荐。

这取决于Element.prototype.matches尚未得到广泛支持。但是，我创建了一个小包装器以使其更易于使用。

DEMO

// live listener function
(function(window) {

  // Element.matches "polyfill"
  (function(e){
    if (typeof e.matches !== "function") {
      e.matches = e.webkitMatchesSelector ||
                  e.mozMatchesSelector    ||
                  e.msMatchesSelector     ||
                  e.oMatchesSelector      ||
                  e.matchesSelector;
    }
  })(Element.prototype);

  function on(selector, eventType, handler) {
    // add listener for all existing elements
    [].forEach.call(document.querySelectorAll(selector), function(elem) {
      elem.addEventListener(eventType, handler);
    });

    // create new "live" observer
    var observer = new MutationObserver(function(records) {
      records.forEach(function(record) {
        [].forEach.call(record.addedNodes || [], function(elem) {
          if (elem.matches(selector)) {
            elem.addEventListener(eventType, handler);
          }
        });
      });
    });

    // watch for DOM changes to body's children and body's subtree
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });

    return observer;
  }

  window.on = on;
})(window);

让我们创建一些元素

// sample button generator
function createButton() {
  var b = document.createElement("button");
  b.className = "hello";
  b.innerHTML = "Spaghett";
  document.body.appendChild(b);
}

// create a new button every second
setInterval(createButton, 1000);

实际使用情况

on("button.hello", "click", function(event) {
  alert("spooked ya!");
  event.preventDefault();
});

值得注意的笔记!

我正在使用 [].forEach.call(..., fn) 因为 querySelectorAll 不 返回一个 数组。相反，它返回 NodeList . NodeList 对象在其原型(prototype)链中没有 Array.prototype，因此无法直接访问 .forEach 函数。 MutationRecord.prototype.addedNodes还返回一个 NodeList。