Language/JavaScript

[Javascript] DOM level 0 고전 이벤트 모델 & 인라인 이벤트 모델

gangintheremark 2023. 7. 12. 00:41
728x90

DOM을 이용한 이벤트 처리 방식이다. 이벤트 모델은 다음과 같이 DOM Level 에 따라 분류한다. 총 네가지 방법으로 이벤트를 연결할 수 있다.

DOM Level0
  • 인라인 이벤트 모델
  • 기본 이벤트 모델
DOM Level2
  • 마이크로소프트 인터넷 익스플로러 이벤트 모델
  • 표준 이벤트 모델

고전 이벤트 모델

고전 방식은 자바스크립트에서 DOM 객체의 이벤트 속성으로 이벤트를 연결하는 방법이다.

  • document.querySelector(선택자).onXXX = 익명함수;
document.querySelector("#id").onclick = func(){ /* 이벤트를 처리할 함수 내용 */ };

 

# 고전 이벤트 모델 예시

<head>
  <script>
    // DOM level 0 의 고전방식으로 이벤트 처리
    function init() {
          // document. querySelector(선택자).onXXX = 익명함수 ; 
      document.querySelector("#img_change").onclick = function () {
        var img = document.querySelector("#img");
        // 이미지 속성(property) 변경
        img.src = "../images/002.png"
        img.width = "200";
        img.height = "200";
      }
    }
  </script>
</head>
<body onload="init()">
  <img src="../images/001.png" width="100" height="100" id="img">
  <button id="img_change">이미지 변경</button>
</body>

실행결과

인라인 이벤트 모델

인라인 이벤트 모델은 HTML 태그 요소 노드에 이벤트 속성을 추가하여 구현한다.

  • <태그 onXXX = "이벤트를 처리할 함수" > </태그>
<button onclick = "func()" > </button>

 

# 인라인 이벤트 모델 예시

<head>
    <script>
        function get_age() {
            var age_input = document.querySelector("#age");
            var result = document.querySelector("#result");
            result.innerText = age_input.value;
        }
    </script>
</head>
<body>
    나이 : <input type="text" id="age"> <br>
    <button onclick="get_age()">나이 출력</button> <br> <!-- 인라인 방식 -->
     입력 나이 출력: <div id="result">0</div>
 </body>

실행결과

728x90