이벤트의 종류
UI Event
Event | Description |
load | 웹페이지의 로드가 완료되었을 때 |
unload | 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) |
error | 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 |
resize | 브라우저 창의 크기를 조절했을 때 |
scroll | 사용자가 페이지를 위아래로 스크롤할 때 |
select | 텍스트를 선택했을 때 |
Keyboard Event
Event | Description |
keydown | 키를 누르고 있을 때 |
keyup | 누르고 있던 키를 뗄 때 |
keypress | 키를 누르고 뗐을 때 |
Mouse Event
Event | Description |
click | 마우스 버튼을 클릭했을 때 |
dbclick | 마우스 버튼을 더블 클릭했을 때 |
mousedown | 마우스 버튼을 누르고 있을 때 |
mouseup | 누르고 있던 마우스 버튼을 뗄 때 |
mousemove | 마우스를 움직일 때 (터치스크린에서 동작하지 않는다) |
mouseover | 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다) |
mouseout | 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다) |
Focus Event
Event | Description |
focus/focusin | 요소가 포커스를 얻었을 때 |
blur/foucusout | 요소가 포커스를 잃었을 때 |
Form Event
Event | Description |
input | input 또는 textarea 요소의 값이 변경되었을 때 |
beforeinput | contenteditable 어트리뷰트를 가진 요소의 값이 변경되었을 때 |
change | input, textarea의 상태가 변경되었을 때 |
submit | form을 submit할 때 (버튼 또는 키) |
reset | reset 버튼을 클릭할 때 (최근에는 사용 안함) |
❗️onChange vs onInput
onChange: input에서 포커스가 벗어났을 때, input에 입력된 값이 변경되었다면 이벤트 발생
onInput: input에 입력된 값이 변경될 때마다 이벤트 발생
그러나 리액트에서는 onChange와 onInput 모두 input 요소의 값이 바뀔 때마다 발생해서 사실상 동일한 이벤트로 취급된다.
Clipboard Event
Event | Description |
cut | 콘텐츠를 잘라내기할 때 |
copy | 콘텐츠를 복사할 때 |
paste | 콘텐츠를 붙여넣기할 때 |
이벤트 핸들러
이벤트 핸들러 어트리뷰트 방식
<button onclick="myHandler()">Click me</button> <script> function myHandler() { alert('Button clicked!'); } </script>
이벤트 핸들러 프로퍼티 방식
<button class="btn">Click me</button> <script> const btn = document.querySelector('.btn'); btn.onclick = function () { alert('Button clicked!'); }; </script>
addEventListner 메서드 방식
<button class="btn">Click me</button> <script> const btn = document.querySelector('.btn'); btn.addEventListener('click', function () { alert('Button clicked!'); }); </script>
이벤트 전파(event propagation)
계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 이러한 이벤트 전파(event propagation)는 전파 방향에 따라 세 단계로 구분할 수 있다.
1) 캡쳐링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파 2) 타깃 단계: 이벤트가 이벤트 타깃에 도달 3) 버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파
자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링이라 하고, 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링이라 한다.
이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있다. 그러나 addEventListener 방식으로 등록한 이벤트 핸들러는 캡처링 단계의 이벤트도 선별적으로 캐치할 수 있다.
addEventListener(type, listener, useCapture)
세번째 인수로 true를 전달하면 캡처링 단계의 이벤트를 캐치할 수 있다.
false를 전달하면 버블링 단계의 이벤트를 캐치한다. 기본값은 false다.
이벤트 위임(event delegation)
이벤트 위임(Event Delegation)은 다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신 하나의 부모 요소에 이벤트 핸들러를 바인딩하는 방법이다. 이벤트 위임을 활용하면 많은 요소들에 일일이 이벤트 핸들러를 할당하지 않아도 되기 때문에 메모리를 절약할 수 있다. 실제로 이벤트를 발생시킨 요소를 알아내기 위해서는
Event.target을 사용한다.리액트의 이벤트 위임
리액트는 이벤트 리스너를 실제로 그려지는 해당 요소에 붙이지 않고 자체적으로 이벤트를 다루기 위해 리액트 루트 요소에 붙인다. 따라서 리액트에서 모든 이벤트는 이벤트 위임으로 처리된다.
DOM 요소의 기본 동작 조작
e.preventDefault
DOM 요소의 기본 동작을 중단시킨다. 예를 들어, a 요소를 클릭하면 href 어트리뷰트에 지정된 링크로 이동하는 기본 동작을 중단시킬 수 있다.
e.stopPropagation
이벤트 전파를 중지시킨다.
참고 자료
<모던 자바스크립트 Deep Dive> 40장 이벤트