day4.1_事件处理封装（兼容ie浏览器）及事件委托

代码封装

<script>
  // 创建事件处理工具
  const eventUtils = {
    // 添加事件
    addEvent(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        // 兼容ie
        element.attachEvent(`on${type}`, handler);
      } else {
        // 兼容小众浏览器
        element["on" + type] = handler;
      }
    },
    // 移除事件
    removeEvent(element, type, handler) {
      if (element.removeEventListener) {
        element.removeEventListener(type, handler);
      } else if (element.detachEvent) {
        element.detachEvent(`on${type}`, handler);
      } else {
        element["on" + type] = null;
      }
    },
    // 获取event
    getEvent(event) {
      // 兼容ie
      return event ? event : window.event;
    },
    // 获取元素目标
    getTarget(event) {
      return event.target ? event.target : event.srcElement;
    },
    // 阻止默认行为
    preventDefault(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    },
    // 停止事件传播（包括事件冒泡和事件捕获）
    stopPropagation(event) {
      if (event.stopPropagation) {
        event.stopPropagation();
      } else {
        event.cancelBubble = true;
      }
    },
  };
</script>

<button id="btn0">添加事件</button>
<button id="btn">测试点击的</button>
<button id="btn2">移除事件</button>

<script>
  const btn0 = document.querySelector("#btn0");
  const btn = document.querySelector("#btn");
  const btn2 = document.querySelector("#btn2");
  const handleClick = function (e) {
    console.log("e", e);
  };
  const handleRemove = function (e) {
    eventUtils.removeEvent(btn, "click", handleClick);
  };
  const handleAddClick = function (e) {
    eventUtils.addEvent(btn, "click", handleClick);
  };
  eventUtils.addEvent(btn0, "click", handleAddClick);
  eventUtils.addEvent(btn2, "click", handleRemove);
</script>

<div>
  <ul id="menu">
    <li id="menu_one">菜单1</li>
    <li id="menu_two">菜单2</li>
    <li id="menu_three">菜单3</li>
    <li id="menu_four">菜单4</li>
  </ul>
</div>

<script>
  // 测试事件委托
  const menu = document.querySelector("#menu");
  const handleMenuClick = function (e) {
    // 获取 event
    const event = eventUtils.getEvent(e);
    // 获取点击的元素
    const target = eventUtils.getTarget(event);
    switch (target.id) {
      case "menu_one":
      case "menu_two":
      case "menu_three":
      case "menu_four":
        console.log("target", target.id);
    }
  };
  eventUtils.addEvent(menu, "click", handleMenuClick);
</script>