javascript中的事件委托绑定答案

【问题标题】：Event delegate binding in javascriptjavascript中的事件委托绑定
【发布时间】：2019-03-10 00:00:16
【问题描述】：

我的任务是将所有 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 的任何指针？

【问题讨论】：

所以您要问的简短问题是“如何在 javascript 中进行委托事件绑定”
我不知道你为什么使用数组。
What is DOM Event delegation?的可能重复
具体回答stackoverflow.com/a/33015903/1586174展示了一些委托逻辑的sn-ps

标签： javascript jquery ecmascript-6

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

您可以使用matches() 函数将事件附加到文档并通过选择器进行过滤，例如：

document.addEventListener('click', clickEvent)

function clickEvent() {
  if (!event.target.matches('.class1 .pagination a')) return
  console.log(event.target)
}

//--JUST FOR DEMO START
setTimeout(function() {
  $('ul').append("<li class='class1'><div class='pagination'> <a href='#'>Coffe</a></div></li>");
}, 1000);
//--JUST FOR DEMO END

document.addEventListener('click', clickEvent)

function clickEvent() {
  if (!event.target.matches('.class1 .pagination a')) return
  console.log(event.target)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class=”characters”>
  <li class='class1'>
    <div class='pagination'> <a href="#">Milk</a></div>
  </li>
  <li class='class2'>
    <div class='pagination'> <a href="#">Tea</a></div>
  </li>
</ul>

【讨论】：