JavaScript 이벤트

이벤트 (Event)
웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생
사용자가 마우스를 클릭 하였을 때, 키보드를 눌렀을 때 등과 같이 다양한 종류의 이벤트가 존재
JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행
이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생 할 경우 실행 >> 이벤트 핸들러 (Handler)또는 이벤트 리스너(Listener)라 하며 이 함수에 이벤트 발생시 실행해야 하는 코드 작성

이벤트 종류 - 마우스 이벤트
웹 초기에는 load, click등 소수의 이벤트만 사용
마우스 이벤트는 웹 어플리케이션에서 가장 많이 사용하는 이벤트
마우스 이벤트 핸들러에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태 등의 정보를 담고 있다.

이벤트 종류 - 키보드 이벤트
키보드의 커서가 웹 브라우저에 나타나는 지점에서 키보드를 조작할 때 이벤트 발생
키보드 조작은 운영체제에 영향을 받으므로 특정 키가 이벤트 핸들러에게 전달되지 않을 수 있다.
키보드 커서가 나타내는 요소가 없다면 document에서 이벤트가 발생

이벤트 종류 - Frame(UI) 이벤트
Frame 관련 이벤트는 특정 DOM 문서에 관련된 이벤트가 아니라 Frame 자체에 대한 이벤트
Frame 이벤트 중에서는 load 이벤트가 가장 많이 사용
Load는 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트를 수행
unload는 사용자가 브라우저를 떠날 때 이벤트가 발생하지만, 사용자가 브라우저를 떠나는 것을 막을 수는 없다.

이벤트 종류 - 폼(Form) 이벤트
Form 관련 이벤트는 웹 초기부터 지원되어 여러 웹 브라우저에서 가장 안정적으로 동작하는 이벤트
자주 사용되는 이벤트로 form이 전송될 때에는 submit 이벤트가 발생
Form을 초기화 할 때는 reset 이벤트가 발생
submit과 reset은 이벤트 핸들러에서 취소할 수 있다.

이벤트 핸들러 등록 - 인라인 이벤트 핸들러
이벤트를 감지하고 대응하는 작업을 등록하는 방법은 여러가지 제공
어떤 이벤트를 처리할 작업을 등록하는 것을 ‘이벤트 핸들러(혹은 리스너)를 등록한다.’라고 표현
JavaScript의 초기에는 HTML 요소의 내부에서 직접 이벤트 핸들러를 등록
이러한 방식은 HTML 코드를 JavaScript 코드가 침범한다는 문제가 있음
이 방식의 경우 최근에는 사용하지 않음. 단, 기존의 코드에서 사용이 되었기에 알아 두어야 함
여러 개의 함수를 한번에 호출 가능
최근에 관심 받고있는 CBD(Component Based Development) 방식의 Angular / React / Vue.js와 같은 framework / library에서는 인라인 방식으로 이벤트를 처리. (CBD에서는 html, css, js를 view의 구성 요소로만으로 보기 때문)

이벤트 핸들러 등록 - 이벤트 핸들러 프로퍼티 방식
HTML에 직접 이벤트 핸들러를 등록하는 방법 대신에 JavaScript에서 이벤트 핸들러를 등록하는 방법이 있다.
JavaScript에서 이벤트 핸들러를 등록함으로써 HTML코드와 JavaScript 코드를 분리 할 수 있다.
이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러를 등록
인라인 이벤트 핸들러 방식처럼 HTML과 JavaScript가 혼용 되어 있는 문제를 해결 할 수 있는 방식
단, 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점을 갖는다

이벤트 핸들러 등록 - addEventListener 메소드 방식
2000년에 발표된 DOM 레벨2 이벤트 명세의 addEventListener(arg1, arg2[, arg3])를 이용하여 좀 더 세밀한 이벤트 제어가 가능
전달 인자의 첫 번째에는 이벤트 이름, 두 번째에는 이벤트 핸들러, 세 번재에는 캡쳐링 여부를 사용
첫 번째 전달인자의 이벤트 이름에는 ‘on’을 제거한 이벤트 이름을 사용
addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.
장점
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
- 캡쳐링과 버블링을 지원
- HTML 요소 뿐만 아니라 모든 DOM(HTML, XML, SVG)에 대해 동작

버블링과 캡쳐링
캡쳐링 : 이벤트가 발생한 요소를 포함하는 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사하는 것을 캡쳐링이라고 한다.
버블링 : 이벤트 발생 요소부터 요소를 포함하는 부모요소까지 올라가면서 이벤트를 검사하는 것을 이벤트 버블링 이라고 한다.

요약
DOM에서 발생되는 이벤트에 대한 핸들러(리스너)를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다.
핸들러 등록은 HTML태그의 on 속성에 명시하는 방법과 JavaScript에서 DOM 검색 후 등록하는 방법이 있다.