JS Event

Mooby·2023년 4월 19일

개념정리

목록 보기

9/12

이벤트란?

이벤트는 웹 페이지에서 발생하는 사건을 의미한다. 사용자가 버튼을 클릭하거나 키보드를 누르는 등의 동작을 이벤트라고 한다. 이 외에도 웹페이지가 로드될 때, 이미지나 비디오가 로드될 때 등 다양한 상황에서도 이벤트가 발생할 수 있다.

이벤트 리스너 등록

이벤트 리스너는 이벤트가 발생했을 때 실행될 함수를 등록하는 코드이다. addEventListener 메소드를 사용하여 이벤트 리스너를 등록할 수 있다.
document.getElementById("myButton").addEventListener("click", myFunction);
위 코드에서 myButton은 버튼의 ID를 나타내고 click은 이벤트 타입을 나타내며 myFunction은 이벤트가 발생했을 때 실행될 함수이다.

이벤트 핸들러 함수

이벤트 핸들러 함수는 이벤트가 발생했을 때 실행되는 함수이다. 이벤트 핸들러 함수는 일반적으로 매개변수로 이벤트 객체를 받는다.
function myFunction(event) {
  // 이벤트 처리 코드
}
이벤트 핸들러 함수는 자바스크립트 함수와 동일한 방식으로 작성할 수 있다. 함수 내에서 이벤트 객체를 사용하여 이벤트 타입, 이벤트 발생 위치, 발생 시각 등의 정보를 알 수 있다.

이벤트 리스너와 이벤트 핸들러의 차이
이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수 그 자체를 의미하며, 이벤트 리스너는 이벤트가 발생했을 때 실행될 함수를 등록하는 코드를 의미한다.

이벤트 버블링과 캡처링

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 것을 의미한다. 반대로 이벤트 캡처링은 상위 요소에서 시작하여 이벤트가 발생한 요소까지 이벤트가 전파되는 것을 의미한다.
<div id="outer">
  <div id="inner">
    버튼
  </div>
</div>
위의 코드에서 버튼을 클릭할 때 이벤트 전파 방식에 따라 다르게 동작한다. 기본적으로는 이벤트 버블링이 적용되며, 이벤트는 inner 요소에서 시작하여 outer 요소까지 전파된다.

이벤트 캡처링을 사용하려면 addEventListener 메서드의 세번째 메매개변수로 true 값을 전달해야 한다.
document.getElementById("outer").addEventListener("click", function() {
  console.log("outer");
}, true);
document.getElementById("inner").addEventListener("click", function() {
  console.log("inner");
}, true);
위 코드에서 버튼을 클릭하면 이벤트가 outer 요소에서 시작하여 inner 요소까지 전파된다.

이벤트 객체

웹 페이지에서 사용자 상호작용이 발생하면 브라우저는 해당 이벤트에 대한 정보를 포함하는 이벤트 객체를 생성한다. 이벤트 객체를 이용하면 해당 이벤트가 발생한 요소, 발생 위치, 이벤트 타입 등의 정보를 알 수 있다.

JavaScript에서 이벤트 객체는 이벤트 핸들러 함수의 첫번째 매개변수로 전달된다. event.target 속성을 이용하면 이벤트가 발생한 요소를 찾을 수 있다
document.addEventListener('click', function(event) {
  console.log(event.target); // 이벤트가 발생한 요소를 출력합니다.
});

이벤트 전파 중지

위의 이벤트 버블링과 이벤트 캡처링을 통해 이벤트가 전파되는 중에 이벤트 전파를 중지하고 싶을 때가 있다.
이벤트 전파를 중지하려면 이벤트 객체의 stopPropagation() 메서드를 호출하면 된다.
document.querySelector('.inner').addEventListener('click', function(event) {
  event.stopPropagation(); // 이벤트 전파를 중지합니다.
  console.log('inner 요소를 클릭했습니다.');
});
document.querySelector('.outer').addEventListener('click', function(event) {
  console.log('outer 요소를 클릭했습니다.');
});
위 예제에서 .inner 요소를 클릭하면 이벤트가 .inner 요소에만 처리되고 .outer 요소에는 전파되지 않는다. 따라서 'inner 요소를 클릭했습니다.'만 출력된다.

이벤트 위임

이벤트 위임이란, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리하는 것을 의미한다. 이벤트 위임을 이용하면 상위 요소에서 하위 요소들을 모두 관리할 수 있어서 코드를 간격하게 만들 수 있다.
<ul id="list">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
위 예제에서 각 항목을 클릭할 때마다 해당 항목의 텍스트를 출력하는 코드를 작성할 때, 보통은 각 항목에 이벤트 핸들러를 등록하는 방식으로 구현할 수 있다.
const listItems = document.querySelectorAll('#list li');
for (let i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', function() {
    console.log(this.textContent);
  });
}
하지만 이벤트 위임을 이용하면 #list 요소에 이벤트 핸들러를 등록하고 이벤트가 발생한 요소를 확인하여 처리할 수 있다.
const list = document.querySelector('#list');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log(event.target.textContent);
  }
});
위 코드에서 event.target은 이벤트가 발생한 요소를 나타낸다. 이벤트가 발생한 요소가 'LT' 요소인 경우에만 처리하도록 조건문을 추가하였다. 각 항목에 이벤트 핸들러를 등록하지 않아도 되므로 코드를 간결하게 만들 수 있다.

주요 이벤트 종류 및 사용법

다양한 이벤트 종류가 있지만 대표적인 이벤트 종류와 사용법을 알아보자.

click 이벤트

마우스를 클릭했을 때 발생하는 이벤트이다.
element.addEventListener('click', function(event) {
  // 클릭 이벤트 처리 코드
});

mouseover, mouseout 이벤트

마우스가 요소 위로 올라갈 때와 요소에서 벗어날 때 발생하는 이벤트이다.
element.addEventListener('mouseover', function(event) {
  // 마우스 오버 이벤트 처리 코드
});
element.addEventListener('mouseout', function(event) {
  // 마우스 아웃 이벤트 처리 코드
});

keydown, keyup 이벤트

키보드의 키를 누르고 뗄 때 발생하는 이벤트이다.

element.addEventListener('keydown', function(event) {
  // 키다운 이벤트 처리 코드
});
element.addEventListener('keyup', function(event) {
  // 키업 이벤트 처리 코드
});