자바 스크립트 마우스 오버 이벤트 - jaba seukeulibteu mauseu obeo ibenteu

Question

목차 Show

🐳 JavaScript
1. click
2. dblclick
3. mousedown / mouseup
5. mousemove
6. mouseover
7. mouseout
8. mouseenter
9. mouseleave
10. contextmenu

위와 같이 네비바 메뉴에 마우스 포인터를 올리면 색상이 변경되고,
포인터가 메뉴 영역을 벗어나면 다시 원래 색상으로 돌아오는 기능을 구현했다.

🐋 HTML

<div id="navBar">
      <ul id = "menuList">
        <li> <a href = "#home" > Home </a> </li>
        <li> <a href = "#about"> About </a> </li>
        <li> <a href = "#window1"> Like </a> </li>
        <li> <a href = "#window2"> Stack </a> </li>
        </ul>
    </div>

html에서 간단하게 ul과 li 속성을 이용해서 텍스트를 넣어주었다.
메뉴 클릭시 해당 페이지로 넘어갈 수 있도록 문서 내 링크를 걸어주었다.
ul에는 id명을 menuList로 설정해주었다.

🐠 CSS

#navBar ul{
  display: flex;
  overflow-x: hidden;
  justify-content: center;
  width: 100vw;  height: 40px;
  position: fixed;
  }

#navBar li{
  display: inline-block;
  padding: 10px 40px 10px 40px; 
  font-size: 20px; font-weight: bold;
  color:white;
}

li 텍스트의 기본 컬러 설정은 white이다.

🐳 JavaScript

let menuEvent = document.getElementById("menuList"); 

menuEvent.addEventListener("mouseover", function (event) {
  event.target.style.color = "#fbdd97";
}, false);


menuEvent.addEventListener("mouseout", function(event){
  event.target.style.color = "white";
}, false)

getElementById() 메서드를 이용하여 해당 기능을 적용할 id를 불러온 후, 이벤트를 연결시키기 위해 addEventListener() 를 사용한다.
위 코드에서는 html 문서 내 menuList 를 불러왔다.

✨ document.getElementById(id);
Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다.

✨ addEventListener(type, listener(, options / useCapture));
EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.

위 코드 내 false의 의미는 다음과 같다.
(이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값이다.)

첫번째 인자로 받은 이벤트("mouseover")가 발생하면 함수를 실행한다.
해당 함수 function(event){...} 에서
내부에 event.target 메서드를 이용하여 event 발생시 기능을 수행할 수 있도록 한다.
해당 페이지에서는 기본 white색상에서 #fbdd97 색상으로 변경된다.

이벤트 "mouseout" 도 위와 동일하게 적용 가능하다.