addEventListener 이벤트리스너 종류

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

출처: https://abc1211.tistory.com/201

 addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록

오늘 코드하다가 resize를 처음 써보면서 이런 것도 있다 싶어서 정리해둔다. MDN 보니까 신기한 게 많다. 자주쓰는 건 몇 개 없겠지만, 알면서 안쓸 필요는 없겠지.

자바스크립트 이벤트 종류

 

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

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

 

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

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

 

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

이벤트	설명
click	사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때
dbclick	두 번 눌렀다 땔 때
mousedown	마우스를 누르고 있을 때
mouseup	눌렀던 마우스 버튼을 땔 때
mousemove	마우스를 움직였을 때
mouseover	요소 위로 마우스를 움직였을 때
mouseout	요소 바깥으로 마우스를 움직였을 때

 

포커스 이벤트 – 포커스 이벤트

이벤트	설명
focus	요소가 포커스를 얻었을 때
focusin
blur	요소가 포커스를 잃었을 때
focusout

 

폼 이벤트 - 폼이벤트

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

 

이벤트가 자바스크립트를 실행하는 법(이벤트 핸들링)

1.이벤트에 반응할 스크립트를 실행할 요소를 선택한다.

2.선택된 노드에서 어떤 이벤트가 발생했을 때 그에 반응할 것인지를 명시한다.

3.이벤트가 발생했을 때 실행될 코드를 작성한다.

 

 

요소에 이벤트를 바인딩하는 세가지 방법

 

1.html 이벤트 핸들러(권장 안함)

예) <a onclick=“hide()”>

사용자는 <a>요소를 클릭했을 때 hide() 라는 함수를 호출 한다.

이 외에도 resize 같은 것도 있다.

자세한 것은 MDN 링크에서 확인해야 한다.

MDN developer.mozilla.org/ko/docs/Web/Events

 

개발자 유튜브를 운영중입니다. 구독 부탁드립니다.

리코딩 ReCoding