Javascript相当于$ .on

Question

作为一个(不幸的是)学到了更多而jQuery不是原始的人 javascript我现在正在花时间用raw替换我的所有代码javascript.不,这不是必需的,但这对我来说是一种更容易学习的方式.我面临的一个问题是将所有我$(document).on的原始转换javascript.我的网站是一个"单页面应用程序",我的大多数实际上HTML是在不同的文件中,通过Ajax请求调用.所以,我的问题是,我如何寻找event动态加载的内容？我假设我必须向onclick他们添加一个事件,但它是如何jQuery做到的而不需要onclick event？

Answer 1

本机API中的绑定处理程序使用完成addEventListener().

要模拟jQuery的事件委托,您可以相当轻松地创建一个使用该.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;
        }
    });
}

可能会进行一些调整,但基本上它是一个将元素绑定到的函数,比如document事件类型,选择器和处理程序.

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

所以你会这样称呼它:

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

Answer 2

以下是JavaScript 等同于on()

jQuery的

$(document).on('click', '#my-id', callback);

function callback(){
   ...handler code here
}

使用Javascript

document.addEventListener('click', function(event) {
    if (event.target.id == 'my-id') {
      callback();
    }
});
function callback(){
   ...handler code here
}

使用这种方法,想法是使用event.target.当然,随着选择器的改变,你的代码必须更多地参与其中

Answer 3

在现代浏览器中，您可以使用它Element.closest()来简化 jQuery.on()方法的复制，并确保捕获来自目标元素子元素的事件冒泡（这是其他一些实现忽略的细微差别）。较旧的浏览器（包括 IE）需要填充程序才能正常工作。

const on = (element, type, selector, handler) => {
  element.addEventListener(type, (event) => {
    if (event.target.closest(selector)) {
      handler(event);
    }
  });
};

on(document, 'click', '#test', (event) => console.log('click'));

<button id="test">
  Clickable
  <i>Also Clickable</i>
</button>