js -- 你不知道的addEventListener

借《你不知道的JavaScript》书的名气，顾取《你不知道的addEventListener》标题

先监听几个事件

image.png

然后点击下，

image.png

结果很明显，多次触发。

image.png

那么，要实现同一个函数代码如何只添加一次监听。

用一代事件“onlcik”，但是这样又会破坏之前的监听，多人协作写不得啊。 那么代码执行单例？ 太麻烦了。

二代事件不会这么low吧，mdn是这么说的：

同一个 EventTarget 注册了多个相同的 EventListener
，那么重复的实例会被抛弃。所以这么做不会使得 EventListener
 被调用两次，也不需要用 [removeEventListener]手动清除多余的EventListener
 ，因为重复的都被自动抛弃了。

感觉很牛逼，但是上面并没有体现。

肯定不是这个写法，换下写法。

image.png

嗯。可以了。