addEventListener 종류

addEventListener 출처 : https://abc1211.tistory.com/201 [길위의 개발자:티스토리]

버블링 출저 :  https://mygumi.tistory.com/315 [마이구미의 HelloWorld:티스토리]

 

※ 이벤트 리스너 이름은 이벤트 이름 앞에 ‘on’을 붙이지만, addEventListener로 사용하면 on 없이 사용.

 

UI 이벤트 |

사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생

load	웹 페이지의 로드가 완료되었을 때
unload	웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize	브라우저의 창 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤 할 때

 

키보드 이벤트 |

사용자가 키보드를 이용할 때 발생한다.

keydown	사용자가 키를 처음 눌렀을 때
keyup	키를 땔 때
keypress	사용자가 눌렀던 키의 문자가 입력되었을 때

 

마우스 이벤트 |

사용자가 마우스나 터치화면을 사용할 때 발생

click	사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때
dbclick	두 번 눌렀다 땔 때
mousedown	마우스를 누르고 있을 때
mouseup	눌렀던 마우스 버튼을 땔 때
mousemove	마우스를 움직였을 때
mouseover	요소 위로 마우스를 움직였을 때
mouseout	요소 바깥으로 마우스를 움직였을 때
wheel	마우스 휠을 굴리는 순간

 

폼 이벤트 |

form과 관련된 이벤트

input	<input>,<textarea>요소 값이 변경되었을 때
change	선택 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때
submit	사용자가 버튼키를 이용하여 폼을 제출할 때
reset	리셋 버튼을 클릭할 때
cut	폼 필드의 콘텐츠를 잘라내기 했을 때
copy	폼 필드의 콘텐츠를 복사했을 때
paste	폼 필드의 콘텐츠를 붙여넣을 때
select	텍스트를 선택했을 때

 

포커스 이벤트 |

요소가 포커싱 되었을 때

focus	요소가 포커스를 얻었을 때
focusin	요소가 포커스를 얻었을 때. bubbling이 일어난다
blur	요소가 포커스를 잃었을 때
focusout	요소가 포커스를 잃었을 때. bubbling이 일어난다

 

버블링이란?

중첩된 요소에서 이벤트가 발생할 때, HTML DOM API의 이벤트 전파(Event Propagation)는 두 가지 방식으로 구분되는데, 두 가지 방식이 바로 버블링과 캡처링이다.

캡처링 | window로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.

버블링 | 이벤트가 발생한 요소부터 window까지 이벤트를 전파한다.

 

캡처링, 버블링, 타겟

target.addEventListener("click", function(){}, true);

# 이벤트 전파를 원하지 않을 때
target.addEventListener("click", function(e){ e.stopPropagation(); });

이벤트 등록 시 세 번째 인자로 제어할 수 있다. default 값이 false이기 때문에, 단순히 사용했다면 버블링을 통해 이벤트를 전파했을 것이다. true로 설정해 주면 캡처링을 통해 이벤트를 전파한다.

이벤트 전파를 원하지 않는다면 .stopPropagation()을 사용