[JavaScript] DOM 이벤트

문서 객체 모델(DOM, Document object model) 이란

주요 DOM 메서드

HTML 이벤트 종류

• click: 요소를 클릭할 때 발생합니다.

• dblclick: 요소를 더블 클릭할 때 발생합니다.

• mousedown: 요소에서 마우스 버튼이 눌릴 때 발생합니다.

• mouseup: 요소에서 마우스 버튼이 떼어질 때 발생합니다.

• mousemove: 요소에서 마우스가 움직일 때 발생합니다.

• mouseover: 요소에 마우스 커서가 올라갈 때 발생합니다.

• mouseout: 요소에서 마우스 커서가 벗어날 때 발생합니다.

• keydown: 키보드에서 키를 누를 때 발생합니다.

• keyup: 키보드에서 키를 뗄 때 발생합니다.

• submit: 폼을 제출할 때 발생합니다.

• change: 요소의 값이 변경될 때 발생합니다.

• load: 웹 페이지나 이미지 등이 로딩되었을 때 발생합니다.

JavaScript로 이벤트 리스너 추가하기

  <button id="myBtn">Click me</button>
    <script>
        const myBtn = document.getElementById("myBtn");
        myBtn.addEventListener("click", function () {
            alert("Hello World!");
        });
    </script>

HTML의 onclick 속성 사용하기

<button onclick="alert('Hello World!')">Click me</button>

jQuery를 사용한 이벤트 처리

<button id="myBtn">Click me</button>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
 $("#myBtn").on("click", function() {
 alert("Hello World!");
 });
 </script>

• addEventListener를 사용하면 여러 이벤트 리스너를 동일한 요소에 추가할 수 있으며, 이벤트 전파 제어가 가능하다.

• onclick 속성은 간단한 이벤트 처리에 적합하지만, 단일 핸들러만 설정할 수 있다.

• jQuery는 이벤트 처리와 DOM 조작을 간편하게 할 수 있지만, 별도의 라이브러리 로드가 필요하다.