1、什么是冒泡事件？

事件冒泡就是父元素和子元素有相同的事件，當觸發子元素時，會向上冒泡，同時也會觸發父元素

簡單的鼠標移動事件：

進入
代碼如下:

mouseenter：不冒泡
mouseover: 冒泡
不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件
只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件

移出
代碼如下:

mouseleave: 不冒泡
mouseout：冒泡
不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件
只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件

componentDidMount() {
   // 執行監聽
    const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
// 鼠標移出時觸發，不冒泡
    navContainerDom.addEventListener("mouseleave", (e) => {
      console.log("dragleave事件觸發");
      navContainerDom.style.display = "none";
    })
  }
  
// 移出監聽
  componentWillUnmount() {
    const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
    navContainerDom.addEventListener("mouseleave", (e) => {
      console.log("dragleave事件觸發");
      navContainerDom.style.display = "none";
    })
  }


//點擊圖標
  /** 顯示菜單 */
  showMenu = () => {
    const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
    navContainerDom.style.display = "flex";
  }