[JavaScript] DOM 이벤트

문서 객체 모델(DOM, Document object model) 이벤트 핸들러

HootJem

Aug 29, 2024

Contents

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

자바스크립트는 여러가지 객체를 사용하여 웹 페이지와 상호작용 한다. 자바스크립트의 객체는 크게 표준 객체 , 문서 객체 모델 , 브라우저 객체 모델 이 있다.

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

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하고 조작하기 위한 일종의 인터페이스를 제공한다.

주요 DOM 메서드

Dom 에서 HTML 요소를 선택하기 위해 메서드를 사용할 수 있다.

메소드	설명
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

Dom에 접근하고 나면 이벤트 생성도 가능하다.

HTML 이벤트 종류

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

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

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

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

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

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

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

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

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

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

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

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

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

addEventListener 메서드를 사용하여 특정 이벤트가 발생했을 때 실행될 함수를 정의할 수 있다.


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

언제 동작할 지는 모르지만 이벤트리스너를 통해 언젠가 myBtn 에 클릭이 이루어지는 것을 감지 하는것이다

HTML의 `onclick` 속성 사용하기

HTML에서 직접 이벤트 핸들러를 설정할 수도 있다. herf 이동이나 submit 때 자주 활용했었다.


<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 조작을 간편하게 할 수 있지만, 별도의 라이브러리 로드가 필요하다.

[JavaScript] DOM 이벤트

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

주요 DOM 메서드

HTML 이벤트 종류

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

HTML의 onclick 속성 사용하기

jQuery를 사용한 이벤트 처리

HTML의 `onclick` 속성 사용하기