关于这篇文章的背景
之前了解到的事件代理不多，就像是一个dom将事件委托给另一个dom，又叫事件委托。后来做了个题目，要实现一个类似jquery的事件委托方法，然后认真的了解了一下。然后专注于实现，其实并没有去看jquery的源码，hhh。
发布订阅模式大概是目前前端框架使用的一种最常见的设计模式了，而我目前也只对发布订阅模式有一定了解，其他的设计模式待后续学习整理。
关于事件委托实现
在jquery中，实现事件委托只需要下面这一行代码就可以搞定
$("#container").on('click', 'item', fn)复制代码 之前会觉得这么用理所当然，所以并没有想到哪一天我会亲手去实现一个这样的功能，现在机会来了。
题目给的很简单，就是将子节点的事件绑到其父节点上，比如下面这段dom，就是将<li>的事件绑定到<ul>上，实现点击<li>时触发<ul>上的事件。
复制代码hello world
题目的js部分是这样的
!function(root, doc){ class Delegator { constructor (selector/* root选择器 */) { // TODO } on (event/* 绑定事件 */, selector/* 触发事件节点对应选择器 */, fn/* 触发函数 */) { // TODO } destroy () { // TODO } }}(window,document)复制代码 然后实现一个功能类似上面jquery的事件委托，就像下面这样的
var delegator = new Delegator('#container');delegator.on('click', 'li.item', fnli)复制代码 忘记一开始想的是什么方法了，反正写到一半的时候突然想起了订阅发布模式（因为刚好那几天在看发布订阅模式），然后开始撸代码。
分解上面的方法，其实可以看作是一个监听器
delegator.addEventListener('click', delegatorFn)复制代码 只不过这个delegatorFn有点特殊，它需要遍历这个所有委托‘click’事件给delegator的子节点，并执行他们的委托fnli
首先，我们把所有的委托当作是一个订阅事件，只不过这个事件里包含了委托者。在Delegator对象的原型里增加一个属性eventObj，里面存放订阅‘click’事件的所有的委托者和委托事件，结构差不多是这样的
this.eventObj.click=[{ selecter:'li.item', callback:fnli}]复制代码 那么整个on的方法其实就是委托者selector订阅事件并委托给调on的被委托者
on (event/* 绑定事件 */, selector/* 触发事件节点对应选择器 */, fn/* 触发函数 */) { // TODO if(!this.eventsObj[event]){ this.eventsObj[event] = []; } this.eventsObj[event].push({ selector, callback: fn }) //这里委托事件给this.root，当被委托者坚挺到event事件时，会触发委托函数delegatorFn this.root.addEventListener(event, delegatorFn); //因为on可以链式调用，所以这里需要返回 return this; }复制代码 现在需要实现delegatorFn方法了，其实也很简单，主要是遍历事件经过的所有dom中哪个selector订阅了它，它就执行对应节点携带的fn。
delegatorFn = (e) => { let target = e.target;//触发事件的selector let currentTarget = e.currentTarget; //被委托者 //判断触发事件的节点及它冒泡经过的节点是否是被委托者,若是，则表示不再有委托者，无需遍历 while(target !== currentTarget){ this.eventsObj[e.type].forEach(item => { //查找订阅事件者 if(target.matches(item.selector)){ //执行订阅事件者携带的函数 item.callback.call(target,e); } }); //往上冒泡 target = target.parentNode; }}复制代码 以上，就是通过发布订阅实现的事件委托的核心部分，主要涉及的还有事件的冒泡。
总结
主要涉及知识点：
- 链式调用：在on方法里返回this
- 事件冒泡：对
e.target进行往上查找并执行触发事件的回调 - 事件订阅