【JS】自定义JS工具函数库-封装DOM事件监听addEventListener-自定义事件总线eventBus-自定义消息订阅与发布PubSub

关于 自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils

1. 封装DOM事件监听addEventListener

1.1 复习DOM事件流

基础知识可以参考这篇博文

【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件

简单复习一下DOM事件流

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

JS代码中只能执行捕获或者冒泡其中的一个阶段

addEventListener(type, listener[, useCapture]) 中的第三个参数
如果是 true，表示在事件捕获阶段调用事件处理程序；
如果是 false（默认值），表示在事件冒泡阶段调用事件处理程序。

let innerBox = document.getElementById('inner')
let outterBox = document.getElementById('outter')

outterBox.addEventListener('click', function () {
   
  console.log('捕获 outter')
},true)

innerBox.addEventListener('click', function () {
   
  console.log('捕获 inner')
},true)

outterBox.addEventListener('click', function () {
   
  console.log('冒泡 outter')
})

innerBox.addEventListener('click', function () {
   
  console.log('冒泡 inner')
})

点击蓝色盒子产生的效果

1.2 事件冒泡

事件在目标元素上处理后, 会由内向外(上)逐层传递

事件冒泡的应用场景: 事件代理/委托/委派

1.3 事件委托

没有将事件绑定在目标元素身上，而是
将多个子元素的同类事件监听委托给(绑定在)共同的一个父组件上

这样做的好处：

1. 减少内存占用(事件监听回调从n变为1）
2. 动态添加的内部元素也能响应

1.4 自定义DOM事件监听

/**
 * 自定义事件监听
 * @param {String} el 父元素选择器
 * @param {String} type 事件类型
 * @param {Function} fn 回调函数
 * @param {String} selector 子元素选择器
 */
export default function myAddEventListener(el, type, fn, selector) {
   
  // 判断el的类型，获取元素
  if (typeof el === "string") {
   
    el = document.querySelector(el);
  }
  // 事件判定
  // 若没有传第四个参数（子元素选择器），则给el元素绑定事件
  if (!selector) {
   
    el.addEventListener(type, fn);
  } else {
   
    el.addEventListener(type, function(e) {
   
      // 获取点击的目标事件源
      const target = e.target;
      // 判断选择器与目标元素是否相符
      if (target.matches(selector)) {
   
        // 相符就执行回调，否则就什么都不做
        fn.