[JavaScript] addEventListener, 이벤트 종류

Event

DOM에서 발생하는 이벤트를 나타내며, 마우스를 클릭하거나 키보드를 누르는 것과 같이 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API들이 생성할 수도 있다.

addEventListener

지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.

addEventListener(type, listener);

type : 수신할 이벤트 종류 (대소문자 구분 문자열)

listener : handleEvent() 메서드를 포함하는 객체 또는 JavaScript 함수

예시 보기

이벤트 종류

구분	이벤트명	설명
Mouse envents	click	마우스 버튼을 클릭했을 때
	dblclick	마우스 버튼을 더블 클릭했을 때
	mousedown	마우스 버튼을 누르고 있을 때
	mouseup	눌렀던 마우스 버튼을 뗄
	mousemove	마우스를 움직일 때
	auxclick	마우스 버튼을 클릭했을 때 (기본이 아닌 장치, ex : 왼쪽 이 외의 버튼)
Keyboard envents	keydown	키를 누르고 있을 때
	keyup	누르고 있던 키를 뗄 때
Focus events	focus	요소가 포커스를 얻었을 때
	blur	요소가 포커스를 잃었을 때
	focusin	요소가 포커스를 얻었을 때 (focus와 다르게 이벤트 버블링이 발생한다.)
	focusout	요소가 포커스를 잃었을 때 (blur와 다르게 이벤트 버블링이 발생한다.)
Clipboard events	copy	복사할 때
	cut	잘라내기할 때
	paste	붙여넣기할 때

🤔HTML 요소의 선택 메서드

메서드	설명
document.getElementsByTagName(태그이름)	태그 이름의 요소를 모두 선택
document.getElementById(아이디)	아이디의 요소를 선택
document.getElementsByClassName(클래스이름)	클래스에 속한 요소를 모두 선택
document.getElementsByName(name속성값)	name 속성값을 가지는 요소를 모두 선택
document.querySelectorAll(선택자)	선택자로 선택되는 요소를 모두 선택

 

Reference

https://developer.mozilla.org/en-US/docs/Web/API/Element

Element - Web APIs | MDN

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN