이벤트 위임에 대한 고찰 #61
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');
});이렇게 말입니다!
추가 질문이 있으실 것 같은데, 여기에 더 달아주세요.