在纯 Javascript 中使用选择器模拟 jQuery“on”

我会用纯 Javascript 模拟 jQuery 的主要功能.on( events , selector , data) http://api.jquery.com/on/方法。

例如

$(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 is span。 （对于这个问题，我忽略了具有多个类的元素的复杂性和跨浏览器兼容性）

The jQuery 的来源 https://github.com/jquery/jquery/blob/master/src/event.js#L708阅读起来并不简单，我也不明白它是如何工作的（因为第一段代码，在 jQuery 中，适用于我的 html 结构）。

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

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

那么，我可以这样做吗？

这里的jsFiddle http://jsfiddle.net/wT4qu/供测试用。

2017 年更新: 当前的 DOM 标准，例如closest https://developer.mozilla.org/en-US/docs/Web/API/Element/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 https://jsfiddle.net/xchfuhpb/