자바스크립트 이벤트리스너

on + '이벤트명'

위의 이벤트리스너를 종종 사용해보았지만 이번에는

addEventListener

를 사용해보았기 때문에 addEventListener 에 대해 공부하도록 하겠다.

.addEventListener()

on+'이벤트명'과 같이 이벤트가 발생하였을 때 함수를 실행시켜준다.

.addEventListener('이벤트명',실행시킬함수)

이런식으로 사용한다.

const a = document.querySelector('.b'); // 변수 a에 b라는 클래스 명이 지정되어있는 요소를 담는다.

a.addEventListener('click',function(){ //변수 a에 'click'이라는 이벤트가 발생되면,
	alert('젤리블로그입니다!');			// alert('젤리~')가 담긴 함수를 실행시킨다.
});

a.addEventListener('click',c); // 함수를 바깥에 지정하고 불러오는 방식.
function c(){
	alert('젤리블로그입니다!');
};

.addEventListener에서는 여러 이벤트를 연결할 수 있고, 이벤트를 제거할 수도 있다.

a.addEventListener('click',event1); // event1 연결.
a.addEventListener('click',event2);	// event2 연결.
a.removeEventListener('click',event1); // event1 제거.

자주 쓰고 있는 event 목록

이벤트명	정의
click	마우스 클릭 했을 때
dbclick	더블 클릭 했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	마우스 버튼을 눌렀다 놓았을 때
dragdrop	마우스 버튼을 누른 상태에서 움직일 때
mouseover	마우스 커서가 지정영역 위로 올라올 때
mouseout	마우스 커서가 지정영역을 벗어났을 때
mousemove	마우스를 움직일 때
load	브라우저에서 문서를 읽어올 때
unload	브라우저에서 문서를 닫을 때
keydown	키보드의 키를 눌렀을 때
keypress	키보드의 키를 눌렀을 때
keyup	키보드의 키를 눌렀다가 뗐을 때

더 많은 이벤트 종류는..
https://www.w3schools.com/jsref/dom_obj_event.asp