Question

与此jQuery等效的JavaScript是什么：

$(document).on('click', '.add-star', function (event) {
    //event will return the .add-star
})

Markup看起来像这样

<div class="add-star">
    <svg>
        <path />
    </svg>
</div>

当我document.addEventListener('click', function(e) {... e.target时，path获取add-star而不是父path。根据我所知道的jQuery方式，它会在事件中查找指定的类并在事件中返回它。但是没有为JS事件指定类，所以它只返回直接点击的元素，来自svg的add-star。

我如何从js事件中返回{{1}}？

Answer 1

这很简单。您只需在.matches()开始的每个元素上使用e.target，遍历每个.parentNode直到绑定元素。当/如果找到匹配项，则调用该函数。

因此，创建一个接收回调的函数并返回一个新函数来处理此操作。

function delegate(selector, handler) {
  return function(event) {
    var el = event.target;
    do {
      if (el.matches(selector)) {
        handler.call(el, event);
      }
    } while ((el = el.parentNode) && el !== this);
  };
}

然后调用该函数来创建处理程序。

document.addEventListener('click', delegate('.add-star', function (event) {
    //event will return the .add-star
}));

Answer 2

这里有两种主要处理事件的方法，事件委托方法类似于你的jQuery示例所做的事情，所以我会把它做成＃1。此方法使用e.target.matches来完成对可能不存在的元素的检查。第二种方法适用于更传统的元素，并使用document.querySelector

方法1委派事件

document.addEventListener('click', e => {
  if (!e.target.matches('.add-star')) { return }

  // do stuff
});

方法2非动态选择器

let ele = document.querySelector('.add-star');
ele.addEventListener('click', e => { // do stuff });

JavaScripts等同于jQuery文档，单击一个类

2 个答案:

方法1委派事件

方法2非动态选择器