JavaScript 이벤트 핸들러 객체

이벤트

이벤트(event)란 웹페이지에서 발생하는 사용자 상호 작용을 말한다.

웹 페이지에서 무언가가 일어났다! 라는 신호이다.

즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말한다.

이벤트의 종류

마우스 이벤트

종류	설명
click	마우스 클릭 시 발생
dblclick	마우스 더블클릭 시 발생
mousedown	마우스를 누를 때 발생
mouseup	마우스를 뗐을 때 발생
mousemove	마우스를 움직일 때 발생
mouseover	마우스가 요소 위로 올라갈 때 발생
mouseout	마우스가 요소 바깥으로 나갈 때 발생

모달창 닫기 기능 구현 시 mousedown 이벤트 사용

모달창과 같이 바깥 영역을 클릭했을 때 닫히게 하고싶다면, mousedown 이벤트를 사용하면 된다.

click 이벤트를 사용할 경우 input 요소의 영역을 지정하다 마우스 드래그 상태에서 모달창 영역을 벗어나게 된다면, 모달창을 닫으려는 의도가 없어도 닫히게 되기 때문이다.

키보드 이벤트

종류	설명
keydown	키보드를 누를 때 발생
keyup	키보드를 뗐을 때 발생
keypress	키를 누르고 떼는 동작이 모두 일어날 때 발생

폼 이벤트

종류	설명
submit	폼을 제출할 때 발생
change	입력 요소의 값이 변경될 때 발생
input	입력 요소에 사용자가 입력할 때 발생

포커스 이벤트

종류	설명
focus	요소에 포커스가 설정될 때 발생
blur	요소에서 포커스가 해제될 때 발생

윈도우 이벤트

종류	설명
load	문서나 자원들이 로드될 때 발생
resize	브라우저 창의 크기가 변경될 때 발생
scroll	스크롤바가 움직일 때 발생

이벤트 핸들러

Javascript 에서 이벤트를 다룰 때 이벤트 핸들러를 사용한다.

이벤트 핸들러는 “이벤트가 발생했을 때 실행되는 함수”를 말한다.

사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 발생될 것인지 정의해주는 것이다.

인라인 방식

인라인 방식은 HTML 요소의 속성으로 직접 이벤트 핸들러를 할당하는 방식이다.

Copy<button onclick="myEvent()">클릭</button>

인라인 방식, 이벤트 핸들러의 단점

MDN 에서는 인라인 방식을 사용하지 말라고 명시해놨다.
HTML 과 Javascript 를 뒤죽박죽 섞어서 쓰면 분석하기 어려워지기 때문이다.
하나의 이벤트 핸들러만 등록시킨다.

이벤트 리스너란?

JavaScript 코드에서 이벤트를 동적으로 처리하는 방식을 말한다.

addEventListener 메서드를 이용해 이벤트를 대상 요소에 연결하고, 이에 따라 실행될 함수(이벤트 핸들러)를 전달한다.

비 인라인 방식

비 인라인 방식은 HTML 이 아닌 Javscript 코드를 이용해 이벤트 핸들러를 동적으로 할당하는 방식이다.

Copy<button id="button">클릭</button>

Copyvar Button = document.getElementById('button');
Button.addEventListener('click', myEvent());
const myEvent = () => {
  alert('클릭!');
}

주로 이벤트 리스너가 Javascript 에서 동적으로 이벤트를 다룰 때 일반적으로 사용한다.

비 인라인 방식, 이벤트 리스너의 장점

이벤트 리스너를 여러개 등록 가능
모든 DOM 노드에 이벤트 리스너 등록 가능
이벤트 전파 제어 가능

이벤트 리스너 추가 및 제거

이벤트 리스너 추가

addEventListener 메서드에는 두 가지 매개변수가 존재한다.

첫번째 매개변수에 핸들러에 등록하고자 하는 이벤트의 이름과,

두번째 매개변수에 우리가 이벤트 후에 실행되기를 원하는 핸들러 함수를 넣어주면 된다.

Copybutton.addEventListener("click",
() => {
let RGB_COLOR =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = RGB_COLOR;
  }
);

이벤트 리스너 제거

Copybutton.removeEventListener("click", changeFontSize);

이벤트 객체

이벤트 핸들러 함수 내부에서 event, evt, e 와 같은 이름의 매개변수를 본 적 있을 것이다.

이것을 이벤트 객체라고 한다.

Copye.target.value
e.currentTarget
e.preventDefault()
e.stopPropagation()

자주 사용되는 이벤트 객체를 사용한 기능이다.

e : 이벤트 객체	설명
e.target.value	주로 `입력 요소`에서 발생하는 이벤트. 이벤트가 발생한 요소 자체를 가리키며, 요소의 현재 `값`을 반환한다. ex. input, textarea, …
e.currentTarget	이벤트 핸들러가 현재 `실행 중인 요소`를 가리키는 속성. 이벤트 버블링(Bubbling)이나 캡처링(Capturing) 단계에서 어떤 요소에서 이벤트가 발생했는지에 대한 정보를 제공한다.
e.preventDefault()	이벤트의 기본 동작을 취소하는 메서드. 버튼의 새로고침하는 기본 동작을 막을 수 있다.
e.stopPropagation()	이벤트의 전파(`버블링` or `캡처링`)를 중지시키는 메서드. 현재 이벤트가 상위 요소로 전파되지 않도록 막는다.

이벤트

웹 브라우저는 사용자의 상호 작용이나 시스템의 상태 변화를 감지하여 이벤트를 발생시킵니다. 이벤트는 다음과 같은 다양한 종류가 있습니다.

마우스 이벤트: 마우스 버튼을 클릭하거나 드래그하는 경우 발생합니다.
키보드 이벤트: 키보드 키를 누르거나 떼는 경우 발생합니다.
로드 이벤트: 웹 페이지가 로드된 경우 발생합니다.
스크롤 이벤트: 웹 페이지가 스크롤된 경우 발생합니다.
폼 이벤트: 폼 요소의 값이 변경된 경우 발생합니다.

이벤트 핸들러

이벤트가 발생하면 해당 이벤트에 대한 처리를 담당하는 함수를 이벤트 핸들러라고 합니다. 이벤트 핸들러는 다음과 같은 방법으로 등록할 수 있습니다.

addEventListener() 메서드: 이벤트가 발생할 요소에 이벤트 핸들러를 등록합니다.
attachEvent() 메서드: IE에서 사용되는 이벤트 핸들러 등록 메서드입니다.

이벤트 객체

이벤트가 발생하면 이벤트 객체가 생성됩니다. 이벤트 객체는 이벤트에 대한 정보를 제공합니다. 이벤트 객체는 이벤트 핸들러 함수에 인자로 전달됩니다.

이벤트 객체는 다음과 같은 프로퍼티와 메서드를 가지고 있습니다.

프로퍼티	설명
`type`	이벤트의 종류
`target`	이벤트가 발생한 요소
`currentTarget`	현재 이벤트 핸들러가 바인딩된 요소
`eventPhase`	이벤트의 단계
`bubbles`	이벤트가 상위 요소로 전파되는지 여부
`cancelable`	이벤트가 취소 가능한지 여부
`defaultPrevented`	이벤트의 기본 동작이 방지되었는지 여부
`preventDefault()`	이벤트의 기본 동작을 방지하는 메서드
`stopPropagation()`	이벤트의 전파를 중지하는 메서드

예제

다음은 이벤트 핸들러와 이벤트 객체를 사용하는 예제입니다.

JavaScript

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

btn.addEventListener("click", function(event) {
  console.log(event.type); // "click"
  console.log(event.target); // <button> 요소
  console.log(event.currentTarget); // <button> 요소
  console.log(event.eventPhase); // 1 (CAPTURING_PHASE)
  console.log(event.bubbles); // true
  console.log(event.cancelable); // true
  console.log(event.defaultPrevented); // false

  if (event.preventDefault()) {
    // 기본 동작을 방지합니다.
  }

  if (event.stopPropagation()) {
    // 이벤트의 전파를 중지합니다.
  }
});

이 예제에서는 button 요소에 click 이벤트를 바인딩하고, 이벤트가 발생하면 이벤트 핸들러 함수를 호출합니다. 이벤트 핸들러 함수 내에서는 이벤트 객체의 프로퍼티와 메서드를 사용하여 이벤트에 대한 정보를 출력합니다.

이벤트 핸들러와 이벤트 객체의 활용

이벤트 핸들러와 이벤트 객체를 사용하여 다음과 같은 작업을 수행할 수 있습니다.

사용자의 상호 작용을 감지하고 이에 따라 응답을 제공합니다.
시스템의 상태 변화를 감지하고 이에 따라 UI를 업데이트합니다.
이벤트의 기본 동작을 변경하거나 취소합니다.

이벤트 핸들러와 이벤트 객체는 JavaScript에서 이벤트를 처리하는 데 필수적인 요소입니다.

JavaScript 이벤트 핸들러 객체