웹을 동적으로 만들기 위해서는 특정 요소에 interactive 한 반응할 수 있게 웹을 만들어야 한다. 이러한 기능은 html, css 만으로는 할 수 없고 자바스크립트 코딩이 필요하다. interactive 한 반응을 할 수 있게 하는 것을 event 라고 한다.
이벤트의 종류에는 여러 가지가 있다.
- 클릭 이벤트
- 마우스 이벤트
- 스크롤 이벤트
- 터치 이벤트
- resize (화면 크기 변화) 이벤트
자바스크립트에서 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 코딩해야 한다.
1. EventListener
- 이벤트를 넣을 때 사용하는 함수 이름은 addEventLister 이다. addEventLister 는 이벤트가 언제 발생하는지 듣고 있다가 이벤트가 발생하면 인자로 받은 함수(콜백함수)를 실행시켜준다.
- 하나의 요소에 여러 event handler 를 붙일 수 있다. (overwriting 되지 않는다)
- 하나의 요소에 같은 종류의 event handler 를 여러 개 붙일 수도 있다.
- 이벤트 리스너 메서드는 모든 DOM 객체에 붙일 수 있다. (HTML, window object... etc)
- removeEventListner() 메서드를 사용해서 이벤트 리스너를 삭제할 수 있다.
2. Syntax
element.addEventListener(event, function, useCapture);1) event
: 이벤트의 종류이다. "click", "mousedown" 등이 해당된다. 여기서 확인할 수 있다
2) function
: 이벤트가 생길 때 호출되는 함수이다.
3) useCapture
: 불리언 값이다. 이벤트 버블링을 사용할지, 이벤트 캡쳐링을 사용할지를 설정한다. useCapture 은 명시하지 않아도 되는 옵션값이다.
