Javascript相当于$ .on [英] Javascript equivalent to $.on

问题描述

正如某人（不幸）了解更多 jQuery 而非原始 javascript 我现在正在花时间用原始 javascript 替换我的所有代码。不，这不是必需的，但这对我来说是一种更容易学习的方式。我面临的一个问题是使用原始 javascript 转换我的所有 $（document）.on 。我的网站是一个单页面应用程序，我的大部分实际 HTML 位于不同的文件中，这些文件通过 Ajax 请求。所以，我的问题是，如何从动态加载的内容中查找事件？我假设我必须向他们添加 onclick 事件，但是如何 jQuery 不需要它 onclick 事件？

As somebody who (unfortunately) learned more of jQuery than raw javascript I am just now taking the time to replace all of my code with raw javascript. No, it's not needed, but it's an easier way for me to learn. A problem I am facing is converting all of my $(document).on with raw javascript. My website is a "single-page application" and most of my actual HTML is in different files which are called via Ajax requests. So, my question is, how would I look for an event fired from dynamically loaded content? I am assuming I would have to add an onclick event to them, but how is it that jQuery does it without needing an onclick event?

推荐答案

本机API中的绑定处理程序是使用 addEventListener（）完成的。

Binding handlers in native API is done using addEventListener().

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

To emulate jQuery's event delegation, you could fairly easily create a system that uses the .matches() method to test the selector you give.

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

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

There are probably some tweaks to be made, but basically it's a function that takes the element to bind to, like document, the event type, a selector and the handler.

它开始于 e.target 并遍历父项，直到它到达绑定元素。每次，它检查当前元素是否与选择器匹配，如果是，则调用处理程序。

It starts on the e.target and traverses up the parents until it gets to the bound element. Each time, it checks to see if the current element matches the selector, and if so, it invokes the handler.

所以你这样称呼它：

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

---

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

---

Here's a live demo that also adds dynamic elements to show that new elements are picked up as well.

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（）添加更多支持。

Here's a shim to add a bit more support for .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;            
    };
}

这篇关于Javascript相当于$ .on的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！