이벤트(Event)

1. 이벤트(Event)

JavaScript에서 이벤트에 대해 알아봅시다!
이벤트(Event)란? 사용자 상호 작용 or 웹 페이지의 상태 변화와 같은 다양한 동작을 처리하는 데 사용됩니다.
이벤트는 일종의 신호로, 웹 페이지 or 애플리케이션에서 어떤 일이 발생했음을 알리는 역할을 합니다.
이벤트는 함수(핸들러)를 연결시켜 활동 발생 시, 동작(트리거)하게 합니다.

2. 이벤트 핸들러 종류

대표적인 DOM 이벤트 핸들러의 종류는 다음과 같습니다.

1) click

요소를 마우스 왼쪽 버튼으로 눌렀을 때, 발생합니다.
예를 들어, 다음과 같이 +1 버튼을 클릭 시, 숫자가 1씩 증가하게 할 수 있습니다.

See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_1)click by NewBean0312 (@newbean0312) on CodePen.

2) mouseover

마우스 커서가 요소 위로 들어왔을 때, 발생합니다.
예를 들어, 다음과 같이 글씨에 마우스를 올리면, 색이 변하게 할 수 있습니다.

See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_1)click by NewBean0312 (@newbean0312) on CodePen.

3) mouseout

마우스 커서가 요소 밖으로 나갔을 때, 발생합니다.
예를 들어, 전의 코드에서 마우스를 올리면 색이 변하는데, 마우스를 떼면 색이 돌아오게 할 수 있습니다.

See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_3)mouseover by NewBean0312 (@newbean0312) on CodePen.

4) focus

요소에 포커스를 했을 때, 발생합니다.
예를 들어, 다음과 같이 input 태그에 focus 시, 자동 입력이라는 글씨가 나오게 할 수 있습니다.

See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_4)mouseout by NewBean0312 (@newbean0312) on CodePen.

5) change

내부 값이 바뀌었을 때, 발생합니다.
예를 들어, 다음과 같이 input 태그의 값이 div 태그에 출력되게 할 수 있습니다.

See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_5)focus by NewBean0312 (@newbean0312) on CodePen.

6) blur

요소가 포커스를 잃었을 때, 발생합니다.

7) keydown

키보드를 눌렀을 때, 발생합니다.

8) keyup

키보드를 뗴었을 때, 발생합니다.

9) drag

요소가 드래그 되었을 때, 발생합니다.

※ 여기서 번외로 addEventListener 함수로 이벤트를 처리할 수 있습니다. index.html과 main.js에 다음과 같이 입력하고 실행해 봅시다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span id="test">test</span>
    <script src="./main.js"></script>
  </body>
</html>

main.js

const test = document.getElementById("test");

new Array(10).fill(0).forEach((_, index) => {
  test.addEventListener("click", () => {
    console.log(`test clicked ${index + 1}`);
  });
});

결과

→ test clicked 1,2,3, ... 처럼 console.log가 10번 출력되는 것을 확인할 수 있습니다.

3. 이벤트 버블링(Event Bubbling)

이번엔 이벤트 버블링에 대해 알아봅시다.
이벤트 버블링(Event Bubbling)이란? HTML 요소에서 발생한 이벤트가 해당 요소의 부모 요소들로 전파되는 현상을 말합니다.
이벤트 버블링은 HTML 요소 트리의 구조를 따라 위로 올라가며 발생합니다.
예를 들어, index.html과 main2.js에 다음과 같이 입력한 후, 버튼을 클릭해 봅시다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="button-wrapper">
      <div id="button-subWrapper">
        <button id="count-up-button">+1</button>
      </div>
    </div>
    <span>0</span>
    <script src="./main.js"></script>
    <script src="./main2.js"></script>
  </body>
</html>

main2.js

const button = document.getElementById("count-up-button");
const buttonWrapper = document.getElementById("button-wrapper");
const buttonSubWrapper = document.getElementById("button-subWrapper");

button.onclick = () => {
  console.log("button event triggered");
};

buttonWrapper.onclick = () => {
  console.log("wrapper event triggered");
};

buttonSubWrapper.onclick = () => {
  console.log("subWrapper event triggered");
};

결과

→ 다음과 같이 3개가 동시에 나오는 것을 확인할 수 있습니다.

이처럼 되지 않기 위해 main2.js에서 event.stopPropagation( );을 입력해 주면, button.onclick(...)만 실행되게 됩니다.

const button = document.getElementById("count-up-button");
const buttonWrapper = document.getElementById("button-wrapper");
const buttonSubWrapper = document.getElementById("button-subWrapper");

button.onclick = (event) => {
  event.stopPropagation();
  console.log("button event triggered");
};

buttonWrapper.onclick = () => {
  console.log("wrapper event triggered");
};

buttonSubWrapper.onclick = () => {
  console.log("subWrapper event triggered");
};

3. 정리하며

지금까지 이벤트에 대해 알아보았습니다.
이벤트 핸들러를 잘 활용하면, 코드가 더 간결해지고 유연한 이벤트 처리가 가능해집니다.

※ Git 주소

JavaScript-study/입문자를 위한 자바스크립트 실습/웹 프론트 언어로서 자바스크립트/4. 이벤트 at mai

Contribute to NewBean0312/JavaScript-study development by creating an account on GitHub.

github.com

'Front-End Study > JavaScript' 카테고리의 다른 글

네트워크 요청 (0)	2024.03.25
에러 핸들링(Error Handling) (0)	2024.03.24
브라우저 객체 (0)	2024.03.24
DOM (0)	2024.03.22
디버깅(Debugging) (0)	2024.03.21