Guidelines
Practice
이벤트(Event)
이벤트는 웹 페이지에서 발생하는 특정한 동작이나 사건을 의미합니다.
웹브라우저 내에서는 사용자가 버튼을 클릭하거나, 키보드 키를 누르거나, 페이지를 이동하는 등 다양한 이벤트가 발생합니다.
이벤트를 매끄럽게 처리하면 사용자와 웹 페이지 간의 상호작용을 개선해, 보다 더 생동감 있는 웹 페이지를 구현할 수 있습니다.
주요 이벤트 타입
-
마우스 이벤트: 웹 페이지에서 마우스와 관련된 동작에 반응합니다.
click
: 요소를 클릭할 때mouseover
: 마우스가 요소 위로 올라갈 때mouseout
: 마우스가 요소에서 벗어날 때
-
키보드 이벤트: 키보드 동작에 반응합니다.
keydown
: 키를 누를 때keyup
: 키를 누르고 뗄 때
-
폼 이벤트: 웹 폼과 관련된 동작에 반응합니다.
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 + '이 클릭되었습니다!'); } });
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help