javascript - javascript中的事件委托绑定

Question

我的任务是将所有 jquery 代码转换为 es6 兼容代码。

例子：

• jQuery

  $('.class1 .class2').on('click', function(e) {
       // logic here
  }
  

• ES6 兼容

  const test = document.querySelector('.class1 .class2');
  test.addEventListener('click', (e) => {
  //logic here
  });
  

这工作正常，但我无法转换稍后注册的 dom 点击事件。

例子：

• jQuery

  $(document).on('click', '.class1 .pagination a', 
      function(e) {
       //logic here
  })
  

我正在尝试做的事情：

var classname = document.querySelectorAll(".class1 .pagination a");

Array.from(classname).forEach(function(element) {
  element.addEventListener('click', (e)=>{
    e.preventDefault();
    alert(e);
  });
});

这里的类.class1 .pagination a是稍后注册的，所以类名是空的。但是使用 jquery$(document).on('click', '.class1 .pagination a')它可以正常工作。

关于如何将 $(document).on('click', '.class1 .pagination a')类似事件转换为 es6 的任何指针？

标签： javascriptjqueryecmascript-6

Answer 1

您可以通过使用Element.matches()检查事件目标来使用事件委托：

const delegate = (container, evtType, targets, cb) => {
  const cont = (container === document || container instanceof HTMLElement) ?
    container : document.querySelector(container);

  if (!container) throw new Error('Event container not found');

  document.addEventListener(evtType, e => {
    if (!e.target.matches(targets)) return;

    cb(e);
  });
}

delegate(document, 'click', 'span, .class, #id, .container .inner a', (e) => console.log(e.target.innerText));

<div class="class">A class</div>
<div id="id">An id</div>
<span>An element</span>
<div class="container">
  <div class="inner"> <a href="#">Nested Selectors</a></div>
</div>

<div>Not delegated</div>