推荐的与jQuery委托事件等效的本机JavaScript是什么？

我想知道jQuery委托事件处理程序的最佳本机js实践是什么：

$('body').on('click','.my-class', event => {
  // perform action
});

这样的事件委派允许您在收听

正文

或

文档

上的所有单击时，将单击事件添加到动态添加的

HTMLElements

现在我正在做这样的事情，感觉有点凌乱，例如，如果用户单击svg，它有时会中断。另外，当您想要在一个相当长的

HTMLElement.classList

eg

'.my main class.my temp class'

中以多个类为目标时，这会变得很困难

document.body.addEventListener('click', event => {
  if (event.target.classList.contains('my-class')) {
    // perform action
  }
});

即使是我可以导入的NPM dom帮助程序库也会很感激。

一种方法：

编辑：更新以处理动态添加的元素

//句柄单击
函数clickHandler（事件）
{
日志（event.target.id）；
}
//处理动态元素更改
函数domchangeHandler（突变）
{
控制台日志（“更改”）；
var eList=document.getElementsByClassName（'my-class'）；
对于（变量i=0；i对于（var i=1；i这是一个演示javascript函数，用于使用
class
属性而不是
classList
检查元素是否有多个类


document.body.addEventListener（'click'，函数（e）{
log（'元素是否有类my class和svg-'+e.target.hasClasses（'my-class svg'））；
log（'元素是否有类my class-'+e.target.hasClasses（'my-class'））；
});
Element.prototype.hasClasses=函数（类）{
//获取元素类字符串
var elementClass=this.getAttribute（'class'）；
//如果根本没有设置类，则返回false
if（elementClass==null）返回false；
//检查是否在elementClass字符串中找到此类
返回类.拆分（''）.reduce（函数（acc，current）{
返回布尔值（acc&&~elementClass.indexOf（当前））；
}，对）；
}；
我上课了


我没有有效和其他类


这不能处理动态添加的
HTMLElements
。我将更新我的问题以使其更清楚。好的@etoxin，您的问题现在更清楚了。在这种情况下，您需要的是您已有的内容。或者在每次更新DOM时重新注册您的事件。请自己跟踪此内容，或者使用“凌乱”突变观察者API当我在StackOverflow上运行它时（通过单击“运行代码片段”），它可以工作。但是当我尝试将它放在我自己的计算机网页上时，即使使用相同的浏览器，它也不能工作。是否有需要加载的JavaScript库？@Christopherbotoms，这应该可以在没有任何库的情况下工作。（这是整个练习的重点）。我能想到的唯一一件事是堆栈溢出代码段将记录到屏幕上，但如果将代码移动到屏幕上，则需要检查开发人员控制台中的日志messages@etoxin，我添加了突变观察者来检查动态变化。我不知道，使用cortex的解决方案可能会更好，但至少这显示了解决此问题的其他方法。
元素
的良好扩展将对此进行测试。谢谢，我希望它对您有用，但请注意
它们很棘手：）