이벤트(Event)

이벤트는 웹 페이지에서 발생하는 특정한 동작이나 사건을 의미합니다.

웹브라우저 내에서는 사용자가 버튼을 클릭하거나, 키보드 키를 누르거나, 페이지를 이동하는 등 다양한 이벤트가 발생합니다.

이벤트를 매끄럽게 처리하면 사용자와 웹 페이지 간의 상호작용을 개선해, 보다 더 생동감 있는 웹 페이지를 구현할 수 있습니다.

1. 마우스 이벤트: 웹 페이지에서 마우스와 관련된 동작에 반응합니다.

   • click: 요소를 클릭할 때
   • mouseover: 마우스가 요소 위로 올라갈 때
   • mouseout: 마우스가 요소에서 벗어날 때

2. 키보드 이벤트: 키보드 동작에 반응합니다.

   • keydown: 키를 누를 때
   • keyup: 키를 누르고 뗄 때

3. 폼 이벤트: 웹 폼과 관련된 동작에 반응합니다.

   • submit: 폼 제출시
   • change: 입력 요소의 값이 바뀔 때

웹 페이지 내 특정 요소가 이벤트를 감지하도록 만들려면, 이벤트 리스너(addEventListener)를 추가해야 합니다.

addEventListener 메서드 사용법:

Copy
const button = document.querySelector('button');

// 버튼에 클릭 이벤트 리스너 추가
button.addEventListener('click', function () {
  alert('버튼이 클릭되었습니다!');
});

이벤트가 발생하면 그와 관련된 다양한 정보를 담은 이벤트 객체가 생성됩니다.

Copy
button.addEventListener('click', function (event) {
  console.log('클릭된 요소:', event.target);
  console.log('클릭된 좌표:', event.clientX, event.clientY);
});

하나의 상위 요소에 이벤트 리스너를 추가하고, 여러 하위 요소에서 발생하는 이벤트를 그 상위 요소에서 처리하는 것을 말합니다.

Copy
<ul id="itemList">
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

JavaScript 예시:

Copy
// li 요소를 감싸는 ul 요소에 이벤트 리스너 추가
document.querySelector('#itemList').addEventListener('click', function (event) {
  if (event.target.tagName === 'LI') {
    alert(event.target.textContent + '이 클릭되었습니다!');
  }
});