[자바스크립트] 10. 이벤트 종류 (이벤트 리스너)

Apr 02, 2025

Contents


<!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>
    <h1>이벤트 리스너</h1>
    <hr />
    <button id="btn1">클릭</button>

    <script>
      let btn1 = document.querySelector("#btn1");

      btn1.addEventListener("click", (e) => {
        console.log(e);
        alert("btn1 호출됨");
      });
    </script>
  </body>
</html>

HTML 부분


<button id="btn1">클릭</button>

<button> 요소에 id="btn1"를 지정함.

JavaScript로 접근하기 위해 고유 식별자인 id를 사용함.

JavaScript 부분


let btn1 = document.querySelector("#btn1");

btn1.addEventListener("click", (e) => {
  console.log(e);
  alert("btn1 호출됨");
});

addEventListener() 메서드를 사용하여 클릭 이벤트(click)를 처리함.

첫 번째 매개변수: 이벤트 타입 (click).

두 번째 매개변수: 이벤트 발생 시 실행할 콜백 함수.

e는 이벤트 객체로, 클릭 시 발생한 다양한 정보를 담고 있음. (예: 클릭 위치, 대상 요소 등)

[자바스크립트] 10. 이벤트 종류 (이벤트 리스너)

이벤트 리스너 사용하기

HTML 부분

JavaScript 부분