[자바스크립트] 8. 이벤트 종류 (클릭)

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 onclick="m1()">클릭</button>
    <div onclick="m2()">클릭2</div>

    <script>
      function m1() {
        // window 객체는 생략 가능함
        window.alert("m1 호출됨");
      }

      function m2() {
        // window 객체는 생략 가능함
        window.alert("m2 호출됨");
      }
    </script>
  </body>
</html>

HTML 부분


<button onclick="m1()">클릭</button>
<div onclick="m2()">클릭2</div>

<button> 태그와 <div> 태그에 각각 onclick 속성을 사용하여 이벤트를 연결함.

사용자가 클릭할 때마다 정의된 함수 m1() 또는 m2()가 호출됨.

JavaScript 부분


function m1() {
  // window 객체는 생략 가능함
  window.alert("m1 호출됨");
}

function m2() {
  // window 객체는 생략 가능함
  window.alert("m2 호출됨");
}

m1() 함수와 m2() 함수는 클릭 이벤트가 발생했을 때 호출되는 함수들임.

window.alert() 메서드를 사용하여 메시지를 출력함.

window 객체는 전역 객체라서 생략해도 됨. (즉, alert()로 사용해도 동일하게 작동함)

[자바스크립트] 8. 이벤트 종류 (클릭)

클릭 이벤트

HTML 부분

JavaScript 부분