[JavaScript] 이벤트(Event), 이벤트 처리기

목차

자바스크립트의 이벤트와 이벤트 처리기: 사용자 상호작용을 살리는 비결 🌟

안녕하세요, 웹을 더욱 생동감 있게 만드는 자바스크립트의 세계로 여러분을 초대합니다! 오늘은 웹 페이지와 사용자 간의 상호작용을 가능하게 만드는 핵심 요소, 바로 '이벤트'와 '이벤트 처리기'에 대해 알아보겠습니다. 사용자의 행동에 반응하는 웹 페이지를 만들고 싶다면, 이 포스트가 큰 도움이 될 거예요!

 

1. 🎈 이벤트란?

이벤트는 사용자가 웹 페이지와 상호 작용할 때 발생하는 사건을 의미합니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 이동 등이 이벤트에 해당합니다. 이런 이벤트들을 적절히 다루면, 사용자 경험을 크게 향상시킬 수 있습니다.

 

2. 🎯 이벤트 처리기란?

이벤트 처리기(또는 이벤트 리스너)는 특정 이벤트가 발생했을 때 실행될 함수를 말합니다. 이벤트가 발생하면, 지정된 이벤트 처리기가 호출되어 해당 이벤트에 대응하는 행동을 수행합니다.

 

3. 🚀 이벤트 처리기 설정하기

HTML 요소에 직접 설정

<button onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>

자바스크립트를 사용하여 설정

document.getElementById("myButton").onclick = function() {
    alert('버튼이 클릭되었습니다!');
};

addEventListener 사용하기

document.getElementById("myButton").addEventListener("click", function() {
    alert('버튼이 클릭되었습니다!');
});

removeEventListener 사용하여 이벤트 제거

var button = document.getElementById("myButton");
function showAlert() {
  alert("이벤트 처리!");
}

button.addEventListener("click", showAlert);
// 나중에 이벤트 리스너 제거
button.removeEventListener("click", showAlert);

 

4. 🌈 다양한 이벤트 종류

• 클릭 이벤트: click, dblclick
• 키보드 이벤트: keypress, keydown, keyup
• 마우스 이벤트: mouseover, mouseout, mousemove
• 폼 이벤트: submit, change, focus, blur
• 기타 이벤트: load, resize, scroll

 

5. 💡 이벤트 전파: 버블링과 캡처링

웹 페이지에서 이벤트는 특정 순서로 전파됩니다. 이벤트 버블링은 이벤트가 발생한 요소부터 시작하여 DOM 트리를 따라 위로 전파되는 현상입니다. 반면, 이벤트 캡처링은 최상위 요소부터 시작하여 발생한 요소까지 내려오는 과정입니다.

버블링 막기

var parent = document.getElementById("parent");
var child = document.getElementById("child");

parent.addEventListener("click", function() {
  alert("부모 요소 클릭!");
});

child.addEventListener("click", function(event) {
  alert("자식 요소 클릭!");
  event.stopPropagation(); // 버블링 중지
});

 

🎉 마치며...

이벤트와 이벤트 처리기는 웹 페이지를 사용자와 소통할 수 있게 만드는 필수 요소입니다. 여러분도 이번 포스트를 통해 배운 지식을 활용하여, 더욱 동적이고 상호작용적인 웹 페이지를 만들어 보세요!

---

💡 팁: addEventListener를 사용하면 같은 요소에 여러 이벤트 처리기를 등록할 수 있습니다.

---

💻 Happy Coding! 💻

---

Reference:

Introduction to events - Learn web development | MDN

JavaScript DOM EventListener

---