자바스크립트 이벤트: 웹페이지와 사용자 상호작용의 핵심!

웹사이트에서 클릭, 입력, 마우스 움직임 등의 상호작용을 처리하는 핵심 기능은 자바스크립트 이벤트입니다. 이벤트는 이용자와 웹 페이지, 그리고 웹 페이지 요소 사이의 상호작용으로 정의할 수 있습니다.

이벤트 핸들링

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

위의 예제는 ‘myButton’이란 ID를 가진 버튼을 클릭할 때마다 얼럿을 띄우는 이벤트 리스너를 추가하는 방법입니다. ‘addEventListener’ 메소드를 사용하여 이벤트를 등록합니다. 이벤트 타입은 첫 번째 인자로 전달되고, 이벤트가 트리거되면 실행될 함수는 두 번째 인자로 전달됩니다.

이벤트 버블링

이벤트 버블링은 하위 요소에서 상위 요소로 이벤트가 전달되는 현상입니다. 예를 들어, 아래의 HTML 코드에서 <button>을 클릭하면 <div>에서도 클릭 이벤트가 발생합니다.

<div onclick="alert('DIV clicked!')">
  <button onclick="alert('Button clicked!')">Click Me!</button>
</div>

이벤트 캡처링

이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전달되는 현상입니다. 이벤트 캡처링을 사용하면 위의 예제에서 <div>를 클릭할 때 <button>에서 이벤트가 발생하지 않습니다. 대신, <div>에서 이벤트가 발생합니다. 아래는 이벤트 캡처링 사용 방법입니다.

document.getElementById("myDiv").addEventListener("click", function() {
  alert("DIV clicked!");
}, true);
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
}, true);

결론

자바스크립트 이벤트는 웹 페이지와 이용자의 상호작용을 처리하기 위해 필수적인 핵심 개념입니다. 이벤트 핸들링, 이벤트 버블링, 이벤트 캡처링 등의 개념을 이해하고 이벤트 리스너를 이용하여 동적인 웹 페이지를 만들어보세요!

자바스크립트 이벤트: 사용자와 웹 페이지, 그리고 페이지 요소 간의 상호작용을 처리하는 핵심 개념입니다.