javascript - 在纯 Javascript 中使用选择器模拟 jQuery "on"

Question

我会在纯 Javascript 中模拟 jQuery 的主要功能 .on( events , selector , data)方法。

例如

$(document).on('click','.button',function() {
   console.log("jquery onclick"); 
});

我认为做这样的东西就足够了

document.addEventListener('click',function(e) {
    if(e.target.className == 'button2') {
         console.log("It works");   
    }
});

但是当我有这个 html 结构时:

<button class="button2">Hello <span>World</span></button>

当在 span 元素上触发点击事件时，我的脚本不起作用，因为 e.target 是 span。 (对于这个问题，我忽略了具有多个类的元素的复杂性和跨浏览器兼容性)

source of jQuery阅读起来并不简单，我不明白它是如何工作的(因为第一段代码，在 jQuery 中，适用于我的 html 结构)。

我需要这个方法，因为我的 html 是动态的，带有这个类的按钮被创建、删除和重新创建很多次。我不想每次都添加听众。

如果可能的话，我会避免包含 jquery 库。

那么，我能做到吗？

这里是 jsFiddle用于测试。

Answer 1

2017 年更新:current DOM standards like closest意味着这现在容易多了。

const addEventForChild = function(parent, eventName, childSelector, cb){      
  parent.addEventListener(eventName, function(event){
    const clickedElement = event.target,
    matchingChild = clickedElement.closest(childSelector)
    if (matchingChild) cb(matchingChild)
  })
};

仅使用它:

addEventForChild(parent, 'click', '.child', function(childElement){
  console.log('Woo click!', childElement)
})

这是一个 jsfiddle