DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. 자바스크립트는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.
HTML에 접근하여 javascript로 동적인 요소(event)를 추가할 수 있다.
이벤트를 달 때 사용하는 함수 이름은 addEventListener이다. event listener 단어를 해석하면 이벤트를 듣고 있다는 뜻으로, addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다.
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('이벤트종류', function() {
//이벤트가 일어났을 때 실행할 내용
});
이벤트 종류는 정말 많지만, 실제적으로 쓰는 이벤트는 그렇게 많지 않다.