반응형
이번 강좌에서는 웹 페이지에서 버튼 클릭, 마우스 이동, 키보드 입력 등 사용자 동작에 반응하는 이벤트(Event)와 이를 처리하는 이벤트 리스너를 초보자도 쉽게 이해할 수 있도록 정리해보겠습니다.
✨ 이벤트란?
이벤트란 사용자가 웹 페이지에서 발생시키는 동작을 의미해요.
예를 들어 클릭(click), 키보드 입력(keydown), 마우스 오버(mouseover) 등이 있어요.
이러한 이벤트가 발생했을 때 실행할 동작을 이벤트 리스너(Event Listener)로 지정해 처리합니다.
📌 이벤트 리스너 등록 방법
✔️ addEventListener() 메서드
가장 많이 사용하는 방식이에요.
document.getElementById("myButton").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});✔️ HTML 태그에 직접 이벤트 속성
간단하게 작성할 때 사용하지만, 유지보수에는 비추천!
<button onclick="alert('클릭!')">버튼</button>🖱️ 대표적인 이벤트 종류
- click : 클릭했을 때
- mouseover : 마우스를 올렸을 때
- mouseout : 마우스를 벗어났을 때
- keydown : 키보드를 눌렀을 때
- keyup : 키보드에서 손을 뗐을 때
- change : 입력 요소의 값이 바뀌었을 때
⚡️ 예제 : 버튼 클릭 이벤트
<button id="btn">눌러보세요</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alert("클릭 성공!");
});
</script>위 코드를 실행하면 버튼을 클릭했을 때 알림창이 뜹니다 😃
🎛️ 이벤트 객체 활용
이벤트가 발생하면 이벤트에 대한 정보가 이벤트 객체(event)로 전달돼요.
document.addEventListener("click", function(e) {
console.log(e.target); // 클릭된 요소를 출력
});이벤트 객체를 활용하면 어떤 요소에서 이벤트가 발생했는지 확인하고 처리할 수 있습니다.
📑 요약
이번 글에서는 이벤트와 이벤트 리스너 등록 방법, 대표 이벤트 종류, 그리고 이벤트 객체에 대해 배웠습니다.
실제 프로젝트에서 필수로 사용되는 기능이니 꼭 익혀두세요!
⏳ 다음 강좌 예고
다음 시간에는 배열(Array)의 선언, 요소 추가, 삭제, 반복 처리 방법을 정리해볼 거예요.
재미있게 따라오세요 😄
반응형