引言

这是一个简单的需求，衍生的思考。

昨天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浏览器Console内才有效，它还没有成为标准。

2015年W3C官方博客宣布成立WICG小组（Web Platform Incubator Community Group），号召开发者把可行的Web平台新特性都提交到这个小组内，其中就有getEventListeners，虽然已经提了2年了，但是好像还没有什么进展。

另外在github上也有人向WHATWG组织（很牛的一个组织，不比W3C差）提了一个issue，有更详细的建议，也有好多人在讨论，个人觉得WHATWG会更快的把它设为新特性。

• chrome的getEventListeners用法
• getEventListeners在WICG小组的议案
• getEventListeners在WHATWG组织的github上面的issue

方法二： 按照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-ignoreconst targetHandlers: EventHandler = this.eventMap.get(node);if (!isProperty(targetHandlers, event)) {targetHandlers[event] = [];}// @ts-ignoretargetHandlers[event].push([handler, capture]);node.addEventListener(event, handler, capture);},removeListeners(node, event) {if (!this.eventMap.has(node)) {return false;}// @ts-ignoreconst 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，所有的代码都在里面

点击演示​codesandbox.io