Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

이벤트 위임에 대한 고찰 #61

Open
Assignees
Labels
Answered답변이 완료된 상태

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

Answered답변이 완료된 상태

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      AltStyle によって変換されたページ (->オリジナル) /