[JS] 이벤트 처리(event handling) | addEventListener, onEvent

이벤트 메소드는
현재 문서에서 특정 이벤트가 발생하면 지정한 이벤트 처리자를 호출하여 실행시키는 역할을 합니다.

 

일반적으로 A라는 이벤트가 발생했을 때 이벤트를 처리하는 처리자에는 addEventListener와 onEvent 가 있습니다.

---

1) addEventListener(이벤트리스너, 이벤트핸들러라고도 함) 메서드 사용

  지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹브라우저는 그 요소에 등록된 이벤트리스너를 실행

- 위 방법은 여러 개의 이벤트 핸들러를 동시에 등록할 수 있어 가장 권장되는 방식입니다.

- removeEventListener (이벤트 제거 메소드)를 이용해 필요없는 이벤트를 지울 수 있습니다.

- 형식 : 이벤트 대상 객체 .addEventListener("이벤트명",함수명);

||(또는) 이벤트 대상 객체.addEventListener("이벤트명",function( ){ });  // 익명함수

const title = document.querySelector(".title");

// 이벤트 처리 - 1. 이벤트리스너 사용
title.addEventListener("click",function(){
   console.log("title was clicked!"); 
});

 

위 예제에서는 title 이라는 클래스에 'click' 이벤트가 발생했을 때 다음의 결과값을 띄우도록 명령했습니다.

위 예제에서는 title 이라는 클래스에 'click' 이벤트가 발생했을 때 다음의 결과값을 띄우도록 명령했습니다.

해당 클래스 클릭시 발생한 클릭 이벤트 빈도수가 출력된 문자옆에 표시되는 것을 볼 수 있습니다.

 

+ removeEventListener 이벤트제거 메소드 사용 

  제거하고 싶은 이벤트대상 객체에 .removeEventListener 메소드 호출

- 2번째 파라미터값에 함수명을 넣어줘야 하므로 익명함수에서는 실행 불가

- 형식 : 제거할 이벤트 대상 객체 .removeEventListener("이벤트명",함수명);  

 

2) DOM 요소 객체의 속성으로 이벤트 등록 (onEvent)

  이벤트 대상에 해당하는 객체의 프로퍼티(property, 속성)로 이벤트를 등록

- 형식 : 이벤트 대상 객체 .onEventName = 함수명;

||(또는) 이벤트 대상 객체.onEventName = function( ){ };

const title = document.querySelector(".title");

 function mouseOver(){ // 함수 선언
    console.log("event was executed");
}

// 이벤트 처리 - 2. onEvent 사용
// 표기방식 1
title.onmouseover = mouseOver; 

// 표기방식 2 (|| 아래와 같이 실행할 수 있다)
// title.onmouseover = function(){
// console.log("event was hovered!")};

위 예제1 방식과는 다르게,

이번에는 이벤트 대상인 title 객체의 하위 프로퍼티(속성)로 마우스오버시 다음의 mouseOver함수를 실행하라고 명령했습니다.

함수 실행 결과값인 "event was executed" 메시지를 띄운 것을 확인할 수 있습니다. 

예제1과는 다르게 이번에는 마우스오버시마다 이벤트빈도수가 쭉쭉 올라가는 모습입니다.

---

+ 자바스크립트 이벤트 종류

  주로 사용되는 대표적인 자바스크립트 이벤트는 다음과 같습니다.

 

UI Event

Event	Description
load	웹페이지나 스크립트의 로드가 완료되었을 때
unload	웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize	브라우저 창의 크기를 조절했을 때
scroll	사용자가 페이지를 위아래로 스크롤할 때
select	텍스트를 선택했을 때

 

Keyboard Event

Event	Description
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 뗄 때
keypress	키를 누르고 뗏을 때

 

Mouse Event

Event	Description
click	마우스 버튼을 클릭했을 때
dbclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때
mouseover	마우스를 요소 위로 움직였을 때
mouseout	마우스를 요소 밖으로 움직였을 때
mouserenter	해당 요소에 마우스 커서를 올려다놓았을때
mouseleave	해당 요소에 마우스 커서를 빼낼때

 

Focus Event

Event	Description
focus/focusin	요소가 포커스를 얻었을 때
blur/foucusout	요소가 포커스를 잃었을 때

 

Form Event

Event	Description
input	input 또는 textarea 요소의 값이 변경되었을 때 contenteditable 어트리뷰트를 가진 요소의 값이 변경되었을 때
change	select box, checkbox, radio button의 상태가 변경되었을 때
submit	form을 submit할 때
reset	reset 버튼을 클릭할 때

 

Clipboard Event

Event	Description
cut	콘텐츠를 잘라내기할 때
copy	콘텐츠를 복사할 때
paste	콘텐츠를 붙여넣기할 때

 

*이해에 도움이 됐던 강의 & 자료 출처 :

https://youtu.be/Qe3WYgP4Lz0 - 노마드코더 / More Events 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%F0%9F%92%AF-%EC%B4%9D-%EC%A0%95%EB%A6%AC - inpa Dev / 자바스크립트 이벤트 총정리

https://pathas.tistory.com/213 - 자바스크립트 이벤트 핸들링