-
Notifications
You must be signed in to change notification settings - Fork 62
이벤트 위임에 대한 고찰 #61
Open
Assignees
Labels
Description
@snowjang24 가 07월 22일 스터디에서 이벤트 위임은 이벤트 캡처링의 일부가 아닌가?라는 질문에 대한 답변입니다.
( 혹시 질문이 틀렸다면, 정정 해 주세요.)
먼저 답변은 이벤트 위임은 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어하는 방식 이라고 정의 할 수 있습니다.
<h1>오늘의 할 일</h1> <ul class="itemList"> <li> <input type="checkbox" id="item1"> <label for="item1">이벤트 버블링 학습</label> </li> <li> <input type="checkbox" id="item2"> <label for="item2">이벤트 캡쳐 학습</label> </li> </ul> <script> var inputs = document.querySelectorAll('input'); inputs.forEach(function(input) { input.addEventListener('click', function(event) { alert('clicked'); }); }); </script>
위 방식대로라면 ul 안에 li 들은 모두 클릭시에 clicked 라는 alert이 뜨게 됩니다.
var itemList = document.querySelector('.itemList'); var li = document.createElement('li'); var input = document.createElement('input'); var label = document.createElement('label'); var labelText = document.createTextNode('이벤트 위임 학습'); input.setAttribute('type', 'checkbox'); input.setAttribute('id', 'item3'); label.setAttribute('for', 'item3'); label.appendChild(labelText); li.appendChild(input); li.appendChild(label); itemList.appendChild(li);
하지만, 만약 위 코드처럼 동적으로 li가 증가한다면, script 태그의 내용이 모든 inputs을 잡지는 못 하겠죠.
이때 필요한 것이 ul에 모든 이벤트 발생을 위임하여 동적 생성에도 대응 할 수 있도록 하는 것입니다.
즉, li에서 발생하는 이벤트 버블링을 부모 객체가 캐치 할 수 있도록 하는 것입니다.
물론 li에다 일일히 이벤트를 달아주는 방법도 있겠지만, 이보다는 이벤트 위임이 코드 가독성과 성능 면에서 유용합니다.
var itemList = document.querySelector('.itemList'); itemList.addEventListener('click', function(event) { alert('clicked'); });
이렇게 말입니다!
추가 질문이 있으실 것 같은데, 여기에 더 달아주세요.
Metadata
Metadata
Assignees
Labels
Type
Fields
Give feedbackNo fields configured for issues without a type.