JavaScript - DOM 이벤트 처리

* DOM이란?

DOM은 Document Object Model(문서 객체 모델)의 약자로 자바스크립트는 DOM을 통해 HTML에 접근 가능

• 문서 객체란 html 문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만든 것

이벤트란?

웹 브라우저가 인식하는 사건

자주 사용되는 이벤트

1> load : HTML, CSS가 모두 로드 완료되었을 때 발생
2> keydown, keyup : 키를 누를 때, 키에서 손을 땟을 때 발생
3> change : 변동이 있을 때 발생
4> click : 클릭 했을 때 발생
5> focus : 포커스를 얻을 때 발생

이벤트 리스너 등록

1> 프로퍼티로 등록

// HTML 태그에 속성으로 등록
<p onclick="alert('클릭했어요!')">클릭해 보세요!</p>

2> 메소드에 이벤트 리스너를 전달

element.addEventListener(이벤트 타입, 이벤트 핸들러, 이벤트 전파방식)

• 이벤트 전파 방식 : false면 버블링(bubbling) 방식, true면 캡처링(capturing) 방식으로 이벤트를 전파(기본값은 false)

<button id="btn">클릭</button>
<p id="text"></p>

const showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.

showBtn.addEventListener("click", function () {
    document.getElementById("text").innerHTML = "텍스트 등장!!";
});

const showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.

showBtn.addEventListener("click", function () {
    document.getElementById("text").innerHTML = "텍스트 등장!!";
});

** 이벤트를 일반형 함수로 만들기

const showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.

showBtn.addEventListener("click", eventHandler);
//아래와 같이 쓰면 X ()는 실행하라는 의미여서 버튼을 누르지 않아도 실행
//showBtn.addEventListener("click", eventHandler());

function eventHandler() {
    document.getElementById("text").innerHTML = "텍스트 등장!!";
}