JS(9). 이벤트핸들러 (1)모델 종류

이벤트 모델 종류

1. 고전 이벤트 모델(기본 이벤트 모델)

특정 요소객체를 가지고 와서 해당요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식

이벤트를 제거할 수도 있음

<button id="btn1">실행확인</button>
    <button id="btn2">실행확인</button>
    <div id="area1" class="area"></div>

    <script>
        const area1 = document.getElementById('area1')
        const btn1 = document.getElementById('btn1')

        btn1.onclick = function(){
            area1.innerHTML += "btn1이 클릭되었습니다 <br>"
        }

        document.getElementById('btn2').onclick = function(){
            area1.innerHTML += "btn2가 클릭되면서 btn1의 이벤트가 제거됨 <br>";
            btn1.onclick = null;
        }
    </script>

위와 같은 코드

const area1 = document.getElementById('area1');
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2'); // btn2를 선언

btn1.onclick = function() {
    area1.innerHTML += "btn1이 클릭되었습니다 <br>";
};

btn2.onclick = function() { // btn2를 변수로 참조하여 이벤트 핸들러 등록
    area1.innerHTML += "btn2가 클릭되면서 btn1의 이벤트가 제거됨 <br>";
    btn1.onclick = null; // btn1의 이벤트 제거
};

 

>> 코드실행 흐름

 

• btn1 클릭:
  • btn1.onclick 핸들러가 실행되어 "btn1이 클릭되었습니다" 메시지가 출력됩니다.
• btn2 클릭:
  • btn2.onclick 핸들러가 실행되어 "btn2가 클릭되면서 btn1의 이벤트가 제거됨" 메시지가 출력됩니다.
  • btn1.onclick = null로 인해 btn1의 클릭 이벤트가 제거됩니다.
• btn1 다시 클릭:
  • btn1의 onclick이 null로 설정되었으므로, 클릭해도 아무 동작도 실행되지 않습니다

 

 

2. 인라인 이벤트 모델

요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식

따로 script 코드에 작성된 함수를 호출하는 방식이다.

<button id="btn3" onclick="document.getElementById('area2').innerHTML += '첫번째 버튼 클릭';">실행확인</button>
    <button id="btn4" onclick="test1();">실행확인</button>
    <div id="area2" class="area"></div>

    <script>
        function test1(){
             document.getElementById('area2').innerHTML += "btn2이 클릭되었습니다 <br>"
        }
    </script>

 

 

3. 표준 이벤트 모델

w3c에서 공식적으로 지정한 이벤트모델

이 모델은 addEventListener 메서드를 통해 구현된다. 인라인 이벤트보다 강력하고 유연하다.

element.addEventListener(event, handler[, options]);


매개변수	설명
event	이벤트 이름 (예: "click", "mouseenter", "keydown" 등)
handler	이벤트 발생 시 실행할 함수 (이벤트 핸들러).
options	(선택적) capture, once, passive 등의 추가 옵션 설정.

** 표준 이벤트 모델의 장점

• 다중 이벤트 등록 가능:
  • 동일한 요소에 여러 개의 이벤트를 독립적으로 등록할 수 있다.
  • 기존 이벤트를 덮어쓰지 않으므로 유연하게 동작합니다.
• HTML과 JavaScript 분리:
  • 이벤트 처리를 HTML에서 분리하여 코드 가독성과 유지보수성을 높입니다.
• 세부 제어 가능:
  • 옵션(once, capture, passive)을 통해 이벤트 처리 방식을 정밀하게 제어할 수 있습니다.
• 다양한 이벤트 지원:
  • 마우스, 키보드, 스크롤 등 다양한 이벤트를 지원합니다.

<button id="btn5">실행확인</button>
    <script>
      const btn5 = document.querySelector("#btn5");

// 클릭 이벤트 추가
btn5.addEventListener("click", function () {
    alert("표준 이벤트 모델 테스트");
});

// 마우스가 버튼 위로 올라갔을 때
btn5.addEventListener("mouseenter", function () {
    btn5.innerHTML = "클릭!!!";
});

// 마우스가 버튼에서 벗어났을 때
btn5.addEventListener("mouseout", function () {
    btn5.innerHTML = "실행확인";
});

    </script>

 

>> 옵션 설명

1. once

once 옵션을 사용하면 이벤트가 한 번만 실행된 뒤 자동으로 제거됩니다.

btn5.addEventListener("click", function () {
    alert("이벤트가 한 번만 실행됩니다!");
}, { once: true });

• 버튼을 클릭하면 알림이 표시되고, 이후 클릭 이벤트는 제거됩니다.

 

2. passive

passive 옵션은 스크롤 이벤트와 같이 브라우저의 기본 동작을 최적화하도록 힌트를 제공합니다.
이 옵션을 설정하면 성능 향상에 도움이 됩니다.

window.addEventListener("scroll", function () {
    console.log("스크롤 중...");
}, { passive: true });

• 사용자가 페이지를 스크롤할 때마다 로그가 출력됩니다.

3. capture

capture 옵션은 이벤트가 캡처링 단계에서 실행될지, 버블링 단계에서 실행될지를 결정합니다.
기본값은 false(버블링 단계)입니다.

btn5.addEventListener("click", function () {
    console.log("캡처링 단계에서 실행");
}, { capture: true });

• 이벤트가 캡처링 단계에서 처리됩니다.

이벤트 처리 단계: 캡처링 vs 버블링

단계설명

캡처링	이벤트가 부모 → 자식 방향으로 전달되며 실행됩니다.
버블링	이벤트가 자식 → 부모 방향으로 전달되며 실행됩니다. (기본값)

 

 

표로 정리: 주요 이벤트 종류와 설명

이벤트명설명주로 사용하는 요소

click	요소를 클릭했을 때 발생.	버튼, 링크, 체크박스 등
mouseenter	마우스를 요소 위로 올렸을 때 발생.	모든 HTML 요소
mouseout	마우스를 요소에서 벗어났을 때 발생.	모든 HTML 요소
keydown	키보드를 눌렀을 때 발생.	입력 필드, 문서 전체
keyup	키보드를 눌렀다 뗐을 때 발생.	입력 필드, 문서 전체
input	입력 값이 실시간으로 변경될 때 발생.	텍스트 필드
change	입력 값이 변경되고 포커스가 다른 곳으로 이동할 때 발생.	드롭다운, 체크박스 등
submit	폼(form)이 제출될 때 발생.	폼 요소(form)
scroll	사용자가 스크롤을 이동할 때 발생.	페이지 전체, 특정 영역