JavaScript는 사용자와 웹 페이지 간의 상호작용을 처리하기 위해 이벤트 핸들링을 제공합니다. 이벤트는 클릭, 마우스 이동, 키보드 입력 등과 같은 사용자의 행동에 의해 발생합니다. 이 글에서는 JavaScript의 이벤트 처리 방식과 이벤트 리스너에 대해 설명하겠습니다.
1. 이벤트 처리 방식
이벤트를 처리하는 방식은 주로 세 가지로 나뉩니다:
1.1. HTML 속성을 사용한 방식
가장 기본적인 방식으로, HTML 요소에 직접 이벤트 핸들러를 추가하는 방법입니다.
<button onclick="alert('Button clicked!')">Click me</button>1.2. DOM 요소의 이벤트 핸들러 속성을 사용하는 방식
JavaScript 코드 내에서 DOM 요소의 이벤트 핸들러 속성을 설정하는 방법입니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('Button clicked!');
};
</script>1.3. addEventListener 메서드를 사용하는 방식
가장 권장되는 방식으로, addEventListener 메서드를 사용하여 이벤트 리스너를 추가하는 방법입니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>2. 이벤트 리스너
addEventListener 메서드는 이벤트 리스너를 등록하고 이벤트가 발생할 때 실행할 콜백 함수를 지정합니다.
2.1. 기본 사용법
addEventListener 메서드는 두 개의 인자를 받습니다: 이벤트 타입과 콜백 함수.
element.addEventListener('event', function);예제:
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>2.2. 이벤트 객체
이벤트가 발생할 때, 이벤트 객체가 자동으로 콜백 함수에 전달됩니다. 이벤트 객체는 이벤트에 대한 다양한 정보를 포함합니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked at position: ', event.clientX, event.clientY);
});
</script>2.3. 여러 개의 이벤트 리스너
addEventListener를 사용하면 동일한 요소에 여러 개의 이벤트 리스너를 추가할 수 있습니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First listener');
});
button.addEventListener('click', function() {
console.log('Second listener');
});
</script>2.4. 이벤트 리스너 제거
removeEventListener 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다. 이를 위해서는 동일한 이벤트 타입과 콜백 함수를 지정해야 합니다.
<button id="myButton">Click me</button>
<button id="removeListener">Remove Listener</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeListener');
function handleClick() {
alert('Button clicked!');
}
button.addEventListener('click', handleClick);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', handleClick);
});
</script>3. 이벤트 전파
이벤트 전파에는 캡처링과 버블링이라는 두 가지 단계가 있습니다. 이벤트는 캡처링 단계에서 시작하여 버블링 단계로 전파됩니다.
3.1. 캡처링과 버블링
- 캡처링 단계: 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려갑니다.
- 버블링 단계: 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 올라갑니다.
기본적으로 이벤트는 버블링 단계에서 이벤트 리스너에 의해 처리됩니다.
3.2. 이벤트 전파 제어
이벤트 전파를 제어하기 위해 이벤트 객체의 메서드를 사용할 수 있습니다.
stopPropagation(): 이벤트가 더 이상 전파되지 않도록 합니다.stopImmediatePropagation(): 현재 요소에 등록된 다른 이벤트 리스너도 실행되지 않도록 합니다.
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // 부모 요소로 이벤트 전파 방지
});
</script>3.3. 이벤트 리스너 옵션
세 번째 인자로 옵션 객체를 전달하여 캡처링 단계에서 이벤트를 처리하도록 설정할 수 있습니다.
element.addEventListener('event', function, { capture: true });예제:
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent clicked');
}, { capture: true });
child.addEventListener('click', function() {
console.log('Child clicked');
});
</script>결론
JavaScript의 이벤트 핸들링은 웹 페이지에서 사용자와의 상호작용을 처리하는 데 필수적인 기능입니다. 이벤트 처리 방식과 이벤트 리스너를 잘 이해하고 활용하면 더욱 다이나믹하고 반응성이 뛰어난 웹 애플리케이션을 개발할 수 있습니다. 다양한 이벤트와 그 처리 방식을 익히고 실습하여, 실제 프로젝트에 적용해 보세요.