JS - 이벤트

이벤트 : 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점

중요 이벤트 종류

구분	이벤트	설명
마우스 이벤트	onClick	마우스로 클릭
	ondblclick	마우스로 빠르게 두 번 클릭
	onmouseover	마우스 포인터를 올리면 발생
	onmouseout	마우스 포인터가 빠져나가면 발생
	onmousemove	마우스 포인터가 움직이면 발생
	onwheel	마우스 휠을 움직이면 발생
키보드 이벤트	onkeypress	키보드 버튼을 누르고 있는 동안 발생
	onkeydown	키보드 버튼을 누른 순간 발생
	onkeyup	키보드 버튼을 눌렀다가 뗀 순간 발생
포커스 이벤트	onfocus	요소에 포커스가 되면 발생
	onblur	요소가 포커스를 잃으면 발생
폼 이벤트	onsubmit	폼이 전송될 때 발생
리소스 이벤트	onload	웹 브라우저의 리소스 로드가 끝나면 발생

 

다른 이벤트들 ↓

Event - Web APIs | MDN (mozilla.org)

Event - Web APIs | MDN

 

이벤트 등록

1. inline 방식

ex. <button onmouseover="mouseEvent()">마우스</button>

여러 이벤트 조건 동시에 가능 

 

2. property 방식 - 노드를 찾아서 그 노드에 속성을 직접 등록하는 방법

ex.

const btnEl = document.querySelector("button");

btnEl.onclick = function(){

  console.log('click event');

}

또는 

btnEl.onclick = clickEvent;

function clickEvent(){

  console.log('focus event')

}

 

3. 이벤트 등록 메서드

addEventListener 활용 이벤트명에서 on부분을 빼고 사용해야함

ex. 

const btnEl = document.querySelector("button");

btnEl.addEventListener("click", function(){

  console.log('click event');

})

 

이벤트 객체 : 이벤트의 종류에 따라서 발생되는 그 고유의 이벤트의 정보들을 담고있는 하나의 객체

btnEl.addEventListener("click", (e)=>{});

 

이벤트 취소

const aEl = document.querySelector("a");

aEl.addEventListener("click", (e)=>{

  e.preventDefault();

})

 

this키워드 → 이벤트가 발생한 대상 노드를 가리킴

주의 : 화살표 함수 사용 시 화살표 함수 내부의 this는 대상 노드를 가르키지 않음

→ e.target으로 우회 필요