关于原生dom事件添加、删除方法的一些拓展

775 阅读5分钟

引言

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

昨天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必须是一个引用对象

developer.mozilla.org/zh-CN/docs/…

addEventListener方法将指定的监听器注册到 EventTarget 上 , 然后removeEventListener内会按照,typelistener 参数useCapture这三个参数来删除 EventTarget 内的Event,如果有一处不一样,就会失败。

官网提供的例子

developer.mozilla.org/zh-CN/docs/…

现在就是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的原理,只要保证typelistener 参数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,所有的代码都在里面

点击演示