原生js怎么实现jquery .on( events, selector, handler )

Question

jquery中如下可以实现事件委派，动态添加的tr也会触发该事件

$( "#dataTable tbody" ).on( "click", "tr", function() {

  console.log( $( this ).text() );

});

在原生js中该怎么实现该功能？

Answer 1

function eventDelegate (e,targetSelector,fn) {    // 兼容性处    let event = e || window.event;    // 获取到目标阶段指向的元素    let target = event.target || event.srcElement;    // 获取到代理事件的函数    let currentTarget = event.currentTarget;    // 处理 matches 的兼容性    if (!Element.prototype.matches) {      Element.prototype.matches =        Element.prototype.matchesSelector ||        Element.prototype.mozMatchesSelector ||        Element.prototype.msMatchesSelector ||        Element.prototype.oMatchesSelector ||        Element.prototype.webkitMatchesSelector ||        function(s) {          let matches = (this.document || this.ownerDocument).querySelectorAll(s),            i = matches.length;          while (--i >= 0 && matches.item(i) !== this) {}          return i > -1;        };    }    // 遍历外层并且匹配    while (target !== currentTarget) {      // 判断是否匹配到我们所需要的元素上      if (target.matches(targetSelector)) {        let sTarget = target;        // 执行绑定的函数，注意 this        fn.call(sTarget, Array.prototype.slice.call(arguments))      }      target = target.parentNode;    }