手写通用的事件监听函数（包含普通绑定和代理绑定）

function bindEvent(elem, type, selector, fn) {
  // 判断有几个参数
  if (fn == null) {
    // 只有3个参数，fn赋值传入的第三个参数
    fn = selector;
    selector = null;
  }
  elem.addEventListener(type, (event) => {
    const target = event.target;
    if (selector) {
      // 代理绑定
      // dom元素是否符合元素选择器
      if (target.matches(selector)) {
        fn.call(target, event);
      }
    } else {
      // 普通绑定
      fn.call(target, event);
    }
  });
}

// 普通绑定使用
const btn1 = document.getElementById("btn1");
bindEvent(btn1, "click", function (event) {
  // console.log(event.target) // 获取触发的元素
  event.preventDefault(); // 阻止默认行为
  alert(this.innerHTML);
});
// 箭头函数
bindEvent(btn1, "click", (event) => {
  // console.log(event.target) // 获取触发的元素
  event.preventDefault(); // 阻止默认行为
  alert(btn1.innerHTML);
});

// 代理绑定使用
const div3 = document.getElementById("div3");
bindEvent(div3, "click", "a", function (event) {
  event.preventDefault();
  alert(this.innerHTML);
});

// 用箭头函数
bindEvent(div3, "click", "a", (event) => {
  event.preventDefault();
  alert(event.target.innerHTML);
});