Javascript 相当于 $.on

Question

作为一个(不幸)对 jQuery 的了解多于 raw javascript 的人，我现在正在学习是时候用原始 javascript 替换我的所有代码了。不，这不是必需的，但对我来说这是一种更简单的学习方式。我面临的一个问题是使用原始 javascript 转换我的所有 $(document).on 。我的网站是一个“单页应用程序”，我的大部分实际 HTML 位于通过 Ajax 请求调用的不同文件中。所以，我的问题是，如何查找从动态加载的内容中触发的事件？我假设我必须向它们添加一个 onclick 事件，但是 jQuery 是如何在不需要 onclick 的情况下做到这一点的 事件？

Answer 1

在 native API 中绑定(bind)处理程序是使用 addEventListener() 完成的。

为了模拟 jQuery 的事件委托(delegate)，您可以相当轻松地创建一个使用 .matches() 方法来测试您提供的选择器的系统。

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

可能需要进行一些调整，但基本上它是一个需要绑定(bind)元素的函数，例如 document、事件类型、选择器和处理程序。

它从e.target开始，向上遍历父元素，直到到达绑定(bind)元素。每次，它都会检查当前元素是否与选择器匹配，如果是，则调用处理程序。

所以你可以这样调用它:

delegate(document, "click", ".some_elem", function(event) {
    this.style.border = "2px dashed orange";
});

<小时/>

这是一个现场演示，它还添加了动态元素以显示新元素也被拾取。

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

delegate(document, "click", ".some_elem", function(event) {
    this.parentNode.appendChild(this.cloneNode(true));
    this.style.border = "2px dashed orange";
});

<div>
  <p class="some_elem">
    <span>
      CLICK ME
    </span>
  </p>
</div>

<小时/>

这是一个填充程序，用于添加对 .matches() 的更多支持。

if (!Element.prototype.matches) {
  Element.prototype.matches = 
    Element.prototype.matchesSelector || 
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector || 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i = matches.length;
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1;            
    };
}