[TIL] 009. JavaScript - Dom, Event

DOM (Document Object Model)

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. 자바스크립트는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.

HTML에 접근하는 이유

HTML에 접근하여 javascript로 동적인 요소(event)를 추가할 수 있다.

EVENT

이벤트를 달 때 사용하는 함수 이름은 addEventListener이다. event listener 단어를 해석하면 이벤트를 듣고 있다는 뜻으로, addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다.

const submitBtn = document.getElementById('submitBtn');

submitBtn.addEventListener('이벤트종류', function() {
  //이벤트가 일어났을 때 실행할 내용
});

이벤트 종류

이벤트 종류는 정말 많지만, 실제적으로 쓰는 이벤트는 그렇게 많지 않다.

• click
• keyup, keydown, keypress (key 이벤트)
• mouseover, mouseout ... (mouse 이벤트)
• select
• wheel
• ...