네비게이션 메뉴 카테고리에서 하위메뉴 띄우기

과정 :

1. 전역에 설정

import { getNode, css } from "./../lib/index.js";

const dropDown = getNode(".nav-menu__item");

const handlerOnDropDown = () => {
  css(".nav-sub-menu", "display", "block");
};

const handlerOffDropDown = () => {
  css(".nav-sub-menu", "display", "none");
};

dropDown.addEventListener("mouseover", handlerOnDropDown);
dropDown.addEventListener("mouseout", handlerOffDropDown);

2.함수로 감싸줌

import { getNode, css } from "./../lib/index.js";

function handleDropDown() {
const dropDown = getNode(".nav-menu__item");
const handlerOnDropDown = () => {
css(".nav-sub-menu", "display", "block");
};
const handlerOffDropDown = () => {
css(".nav-sub-menu", "display", "none");
};
dropDown.addEventListener("mouseover", handlerOnDropDown);
return dropDown.addEventListener("mouseout", handlerOffDropDown);
}

handleDropDown();

3.즉시실행함수식으로 작성, display:none으로 해보기

import {
  getNode,
  bindEvent,
  css,
  visibleElement,
  invisibleElement,
} from "./../lib/index.js";

const dropDown = getNode(".nav-menu__list");
const dropDownItem = getNode(".nav-sub-menu ");

 const handler = (() => {
   let isEnter = false;

   return () => {
     !isEnter
       ? css(dropDownItem, "display", "block")
       : css(dropDownItem, "display", "none");
     isEnter = !isEnter;
   };
 })();

bindEvent(dropDown, "mouseover focus", handler);
bindEvent(dropDown, "mouseout blur", handler);

4. 즉시실행함수식으로 작성, visiblity:hidden

<ul class="nav-sub-menu" hidden>
            <li>
                <a href="#"
                  ><img
                    src="./assets/icons/navigation-Icon/Icon.svg"
                    alt="메뉴 아이콘"
                  />선물하기</a
                >
              </li>
              <li>
                <a href="#"
                  ><img
                    src="./assets/icons/navigation-Icon/Icon-1.svg"
                    alt="메뉴 아이콘"
                  />채소</a
                >
              </li>
            ...
            ...
            ...
              <li>
                <a href="#"
                  ><img
                    src="./assets/icons/navigation-Icon/Icon-21.svg"
                    alt="메뉴 아이콘"
                  />여행 · 티켓</a
                >
            </li>
    </ul>

 

import {
  getNode,
  bindEvent,
  css,
  visibleElement,
  invisibleElement,
} from "./../lib/index.js";

const dropDown = getNode(".nav-menu__list");
const dropDownItem = getNode(".nav-sub-menu ");


const handler = (() => {
  let isEnter = false;

  return () => {
    !isEnter ? visibleElement(dropDownItem) : invisibleElement(dropDownItem);
    isEnter = !isEnter;
  };
})();

bindEvent(dropDown, "mouseover focus", handler);
bindEvent(dropDown, "mouseout blur", handler);

 

✅ mouseover/mouseenter 쓴 이유

mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파된다.
그리고 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있다.

mouseEnter/mouseLeave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받을 수 있게 된다.
즉 target과 currentTarget이 항상 일치한다. 또한 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없다. 

 

완성 :