본문으로 건너뛰기

이벤트(Event)

이벤트(Event)

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

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

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


주요 이벤트 타입

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

    • click: 요소를 클릭할 때
    • mouseover: 마우스가 요소 위로 올라갈 때
    • mouseout: 마우스가 요소에서 벗어날 때
  2. 키보드 이벤트: 키보드 동작에 반응합니다.

    • keydown: 키를 누를 때
    • keyup: 키를 누르고 뗄 때
  3. 폼 이벤트: 웹 폼과 관련된 동작에 반응합니다.

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

이벤트 리스너 추가하기

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

addEventListener 메서드 사용법:

addEventListener 메서드 사용법
const button = document.querySelector('button');

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

이벤트 객체와 정보

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

addEventListener 콜백 함수에서 event 객체 활용
button.addEventListener('click', function (event) {
console.log('클릭된 요소:', event.target);
console.log('클릭된 좌표:', event.clientX, event.clientY);
});

이벤트 위임

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

HTML: 이벤트 위임을 위한 HTML 요소들
<ul id="itemList">
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
</ul>

JavaScript 예시:

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