2024. 4. 30. 16:02ㆍJavascript
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
이벤트 위임은 이벤트 핸들링을 효율적으로 관리하고 코드를 단순화하는 데에 도움을 줍니다. 이번 포스트 글에서는 이벤트 위임의 개념부터 활용 사례까지 자세히 살펴보겠습니다.
이벤트 위임
이벤트 위임이란 하위 요소에 직접 이벤트 핸들러를 할당하는 대신, 상위 요소에서 이벤트를 처리하는 것입니다. 이를 통해 많은 이벤트 핸들러를 줄이고, 동적으로 생성되는 요소에 대한 이벤트 처리를 쉽게 할 수 있습니다.
아래의 예시 코드와 함께 살펴보겠습니다.
하위 요소에 직접 이벤트 핸들러를 할당한 예시 코드
각 버튼에 개별적으로 클릭(click) 이벤트 핸들러를 할당하고 있습니다.
<html>
...
<body>
<button id="button1">버튼 1</button>
<button id="button2">버튼 2</button>
<button id="button3">버튼 3</button>
</body>
</html>
<script>
document.getElementById('button1').addEventListener('click', function() {
console.log('버튼 1이 클릭되었습니다!');
});
document.getElementById('button2').addEventListener('click', function() {
console.log('버튼 2가 클릭되었습니다!');
});
document.getElementById('button3').addEventListener('click', function() {
console.log('버튼 3이 클릭되었습니다!');
});
</script>
상위 요소에 이벤트 핸들러를 할당한 예시 코드
아래의 코드에서는 상위 요소인 div#parent에 클릭(click) 이벤트 핸들러를 할당하고 있습니다. 클릭된 요소가 버튼인 경우에만 해당 이벤트를 처리하고 있습니다. 이렇게 하면 버튼이 추가되거나 제거되더라도 이벤트 핸들러를 변경할 필요가 없어집니다.
<html>
...
<body>
<div id="parent">
<button id="button1">버튼 1</button>
<button id="button2">버튼 2</button>
<button id="button3">버튼 3</button>
</div>
</body>
</html>
<script>
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log('클릭된 버튼:', event.target.textContent);
}
});
</script>
이벤트 위임을 활용하여 리스트 아이템을 추가해 보자
요소 ul#parent-list에 이벤트 핸들러를 할당하여 클릭 이벤트를 처리하고 있습니다. 클릭된 요소가 li인 경우에만 해당 이벤트를 처리하도록 하였습니다. 이렇게 함으로써 이벤트 위임을 통해 모든 리스트 아이템에 대한 클릭 이벤트를 한 곳에서 관리할 수 있습니다.
또한 추가 버튼을 클릭하면 새로운 아이템이 동적으로 추가되며, 이 역시 이벤트 위임을 통해 새로운 아이템에 대한 클릭 이벤트를 자동으로 처리합니다.
<html>
...
<body>
<ul id="parent-list">
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
</ul>
<button id="add-button">
아이템 추가하기
</button>
</body>
</html>
<script>
// 상위 요소인 ul에 이벤트 핸들러를 할당합니다.
document.getElementById('parent-list').addEventListener('click', function(event) {
// 클릭된 요소가 li인 경우에만 처리합니다.
if (event.target.tagName === 'LI') {
// 클릭된 li 요소의 텍스트 내용을 출력합니다.
console.log('클릭된 아이템:', event.target.textContent);
}
});
// 동적으로 새로운 li 요소를 추가하는 함수
function addNewItem(text) {
var newItem = document.createElement('li');
newItem.textContent = text;
document.getElementById('parent-list').appendChild(newItem);
}
// 버튼을 클릭할 때마다 새로운 아이템을 추가합니다.
document.getElementById('add-button').addEventListener('click', function() {
var newItemText = prompt('새로운 아이템의 내용을 입력하세요:');
if (newItemText) {
addNewItem(newItemText);
}
});
</script>이벤트 위임 패턴을 활용하는 이유
성능 개선
개별적으로 각 요소에 이벤트 핸들러를 할당하는 것보다 하나의 상위 요소에 이벤트 핸들러를 할당하는 것이 성능상 이점이 있습니다. 이는 이벤트 핸들러의 수가 줄어들어 메모리 사용량과 로딩 시간을 줄여줍니다.
동적 요소 처리
동적으로 생성되는 요소에 대해서도 이벤트 처리할 수 있습니다. 상위 요소에 이벤트 핸들러를 할당하면 새로운 하위 요소가 추가되어도 자동으로 이벤트를 처리할 수 있습니다.
코드의 간결성
하나의 이벤트 핸들러를 여러 요소에 적용할 수 있으므로 코드가 더 간결해집니다.
유지보수의 용이성
상위 요소에 이벤트 핸들러를 할당하면 요소의 추가, 제거 또는 이동과 관련된 변경 사항에 대해 더 쉽게 대응할 수 있습니다. 하위 요소가 변경되더라도 이벤트 핸들러를 수정할 필요가 없습니다.
이벤트 버블링 활용
이벤트 위임은 이벤트 버블링을 활용하여 상위 요소에서 하위 요소까지 이벤트가 전파되는 것을 이용합니다. 즉 이벤트가 하위 요소에서 발생하더라도 상위 요소로 이벤트가 전파되어 상위 요소에 할당된 이벤트 핸들러가 이벤트를 감지하고 처리할 수 있습니다.
부모 요소에 이벤트 핸들러가 등록되어 있어야만 이벤트 위임이 제대로 작동합니다. 이를 통해 중첩된 요소들에 대한 이벤트 처리를 효율적으로 관리할 수 있습니다.
이번에 다룬 내용을 바탕으로 Javascript 개발에서 이벤트 위임을 활용하여 코드의 품질을 향상해 보세요.
[Defect] 브라우저 리사이징(Resizing)할 때, 불안정한 Swiper 동작 해결
웹 개발에서 Swiper를 사용하면 간편하게 슬라이드 기능을 구현할 수 있지만, 브라우저 리사이징 중에 Swiper가 제대로 동작하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위해 아래와 같은
dev-chim.tistory.com
[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법
빙챗(Bing Chat)은 사용자의 검색 경험을 향상하기 위해 AI 기반으로 마이크로소프트에서 개발한 채팅 기능입니다. 빙챗은 이제 마이크로소프트 코파일럿(Copilot)으로 브랜드명이 변경되었습니다.
dev-chim.tistory.com
[CSS] 플렉스 박스(Flexbox)와 아이템 속성 살펴보기
플렉스 박스(Flexbox)는 웹 레이아웃을 구성하는 데 유용한 강력한 도구입니다. 이를 통해 요소들을 유연하게 정렬하고 배치할 수 있으며, 다양한 디바이스와 화면 크기에 대응하여 일관된 레이아
dev-chim.tistory.com
[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)
스니페이스트(Snipaste)는 화면 캡쳐부터 다양한 편집 기능을 제공하여 작업 효율성을 높여주는 도구입니다. 가장 매력적인 기능으로 핀 고정이 있고, 스크린샷을 저장할 수 있음은 물론이고, 클
dev-chim.tistory.com
초보자를 위한 Safari 브라우저 개발자 도구 설정 방법
Safari 브라우저 개발자 도구 세팅 방법 Safari 브라우저의 개발자 도구는 웹 개발을 보다 효과적으로 수행할 수 있게 도와주는 강력한 도구입니다. Safari의 개발자 도구를 활성화하는 방법에 대해
dev-chim.tistory.com