[Javascript] addEventListener 사용법과 이벤트(Event) 종류 / onClick의 차이

addEventListener()이란?

사용자와 상호 작용을 하면서 마우스(키보드/터치/펜) 등을 조작하면 그에 대한 반응을 하는 것이며, 특정 이벤트가 발생 되었을 때 특정 함수를 실행할 수 있게 해주는 것이다.
 

자바스크립트 이벤트 3가지 방법

1.  HTML 요소의 속성으로 등록 - 이벤트를 하나밖에 지정할 수 없다는 단점이 있다.

<input type=button onClick="btnClick()">

 
2. DOM 요소의 프로퍼티로 등록 - 이벤트를 하나밖에 지정할 수 없다는 단점이 있다.

let btn = document.getElementByID("button"); btn.onClick = btnClick();

 
3. addEventListener 사용하여 등록 - 여러 개의 이벤트 등록이 가능하다.

const title = document.querySelector("h1"); 
 
title.addEventListener("이벤트종류", 함수이름){
	this.classList.style.dispaly: "block"
}

 
많이 사용하는 이벤트 속성

mouseover	객체 영역에 마우스 커서가 진입하는 순
mouseout	객체의 영역 위에 마우스 커서가 빠져나가는 순간
mousedown	객체의 영역 위에서 마우스 버튼을 누르는 순간
mouseup	객체의 영역 위에서 마우스 버튼을 떼는 순간
mousemove	객체의 영역 위에서 마우스 커서가 움직이는 순간
keydown	키를 눌렀을 때 발생
keyup	키를 뗐을 때 발생
keypress	키를 눌렀을 때 발생
click	마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
resize	브라우저 창의 크기를 조절할때 발생한다.
scroll	스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생
change	변동이 있을 때 발생
focus	포커스를 얻었을 때 발생
select	option 태그 등에서 선택을 했을 때 발생
submit	submit 실행 시 발생
unload	링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
load	로드가 완료 되었을 때 발생

출처: https://lakelouise.tistory.com/35

 

---

onClick()과의 차이

 
onClick()으로 해도 되지않을까? 하는 사람들이 있을 것이다. onClick()은 하나의 이벤트만 실행할 수 있다. 
 
 
예제 )

<button class="event">
버튼
</button>

let click = document.querySelector('.event');

click.onclick = function() {
    console.log('onclick1');
}
click.onclick = function() {
    console.log('onclick2');
}
click.addEventListener('click', function(){
    console.log('addEventListener1');
})
click.addEventListener('click', function(){
    console.log('addEventListener2');
})
click.addEventListener('click', function(){
    console.log('addEventListener3');
})

// onclick은 두개, addEventListener는 세개를 등록했다.

출처: https://sunjin-kim.tistory.com/41

결과

onClick을 두 번 등록했는데 onClick2만 출력이 되었다. 두 개 이상 등록하면 마지막에 등록한 이벤트만 작동하게 된다.
따라서 개발자들이 선호하고 권장하는 이벤트는 addEventener()이다.