原生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;

    }