引言
这是一个简单的需求，衍生的思考。
昨天QA提了一个富文本优化的需求，当插入视频和音频时，如果用户同时点击了视频、音频，那么其他的视频或者音频应该停止播放，只有最后一个点击的才会是播放状态。
需求很简单（天真的想法），稍微理清下思路：
- 多媒体文件插入之后，获取dom内所有的多媒体元素
- 循环给他们添加事件，在添加事件前，remove掉之前的事件
- 当任何一个元素点击之后，遍历多媒体文件列表，如何不是自己，其他的所有的都暂停就好了
三步搞定。
上代码
onEmbed() {
const item = document.querySelectorAll('video,audio')
item.forEach((element, kindex) => {
const clickFun = e => {
item.forEach((i, index) => {
// 内容中包含音频和视频时，音频和视频能同时播放
if (index !== kindex) {
i.pause()
}
})
}
element.removeEventListener('play', clickFun, false)
element.addEventListener('play', clickFun, false)
})
},
代码看上去完美，运行下，发现没有问题，当多个视频点击时，永远只有最后一个视频点击会播放，其他的只会暂停，
如果事情这么简单，那就不会有这次blog记录了，这个代码有严重的性能问题，有兴趣的，可以停下来思考一分钟
console.log("思考是不可能的，我只想立马知道答案！")
好了，现在揭露，如果在clickFun事件中，打印下console.log(e)，就会发现每多次添加一个视频，e就会输出多次，类似下图，这样随着添加的元素变多，那么就会造成这个事件调用多次，所以 还需要进一步改进，同时也得查清楚removeEventListener为啥没有效果。
事件触发了多次
removeEventListener介绍
仔细阅读了下代码，应该是clickFun这个事件，每次生成，都会new一个，而removeEventListener要remove掉addEventListener添加的事件，function必须是一个引用对象
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener
addEventListener方法将指定的监听器注册到 EventTarget 上 , 然后removeEventListener内会按照，type、listener 参数、useCapture这三个参数来删除 EventTarget 内的Event，如果有一处不一样，就会失败。
官网提供的例子
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
现在就是listener因为每次都会触发，所以内存中一直都是new一个 ，所以导致无法remove
填坑
方法一： 找到目标元素，遍历所有的event，然后remove掉就好了，比如说chrome内的Event Listeners工具，监测元素的事件，然后remove掉就好了
chrome的Event Listeners工具
可惜这个方法，目前只有在chrome浏览器Console内才有效，它还没有成为标准。
2015年W3C官方博客宣布成立WICG小组（Web Platform Incubator Community Group），号召开发者把可行的Web平台新特性都提交到这个小组内，其中就有getEventListeners，虽然已经提了2年了，但是好像还没有什么进展。
另外在github上也有人向WHATWG组织（很牛的一个组织，不比W3C差）提了一个issue，有更详细的建议，也有好多人在讨论，个人觉得WHATWG会更快的把它设为新特性。
方法二： 按照removeEventListener的原理，只要保证type、listener 参数、useCapture这三个参数一致，肯定就可以删除了，那么把clickFun移出循环内应该就可以了。
看代码
// clickFun放置到最外层，保证只生成一次
const clickFun = e => {
const item = document.querySelectorAll('video,audio')
item.forEach((i, index) => {
// 内容中包含音频和视频时，音频和视频能同时播放
if (index !== Number(e.target.getAttribute('kindex'))) {
i.pause()
}
})
}
onEmbed() {
const item = document.querySelectorAll('video,audio')
item.forEach((element, kindex) => {
element.setAttribute('kindex', kindex)
element.removeEventListener('play', clickFun, false)
element.addEventListener('play', clickFun, false)
})
}
代码运行后，完美，一切都按照最初的设想运行下去。
事情到这里结束了吗？并没有，现在回想方法一和removeEventListener的介绍，我们前端如果需要remove掉某个dom节点的某个类型所有的事件，应该如何处理？如果需要查看某个节点所有事件应该如何处理？而且目前 现在原生add、remove事件真的好难用 ，有没有更简单的写法。
这就是新的需求，后面一个问题，还可以通过chrome Event Listeners工具查询，但是通过编码操作就不行了。
其实仔细想想，关于第一个问题也很好解决 ，如果我们拿不到节点的Event，那每次添加Event前，把Event存储到一个列表内，如果要remove，只要遍历这个列表就可以了，这样所有的的Event都可以管理了，以后要操作也方便了。
好了，思想已经有了，接下来就是撸代码了。
type Capture = boolean | AddEventListenerOptions;
interface EventHandler {
[handlers: string]: [[EventListenerOrEventListenerObject, Capture]] | [];
}
const isProperty = (obj, property) =>
Object.prototype.hasOwnProperty.call(obj, property);
const dom = {
eventMap: new Map<Element, EventHandler>(),
addListener(
node: Element,
event: string,
handler: EventListenerOrEventListenerObject,
capture: Capture
) {
if (!this.eventMap.has(node)) {
this.eventMap.set(node, Object.create(null));
}
// @ts-ignore
const targetHandlers: EventHandler = this.eventMap.get(node);
if (!isProperty(targetHandlers, event)) {
targetHandlers[event] = [];
}
// @ts-ignore
targetHandlers[event].push([handler, capture]);
node.addEventListener(event, handler, capture);
},
removeListeners(node, event) {
if (!this.eventMap.has(node)) {
return false;
}
// @ts-ignore
const targetHandlers: EventHandler = this.eventMap.get(node);
if (!isProperty(targetHandlers, event)) {
return false;
}
targetHandlers[event].forEach(th =>
node.removeEventListener(event, th[0], th[1])
);
}
};
export default dom;
代码很简单，不到50行，但是基本上实现了，简单的添加、删除、罗列已有监听事件列表。
删除事件也不用传 handler，比之前方便了很多。
dom.addListener(evn, "click", clickfun, false);
dom.removeListeners(evn, "click");
通过导出的api可以很方便的查看，某个node下有多少类型事件
最后把代码整理了下，做了一个demo，放在了codesandebox，所有的代码都在里面
网友评论