Event Delegation(이벤트 위임) #6
Comments
이벤트 위임(Event Delegation)이벤트 위임의 이해에는 이벤트 버블링과 이벤트 캡쳐에 대한 이해가 수반된다. 우선 그림으로 보면, 이벤트 버블링과 이벤트 캡쳐의 개념은 다음과 같다.
이벤트 버블링(Event Bubbling)<body>
<div class="el1">
<div class="el2">
<div class="el3">
</div>
</div>
</div>
</body>var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', bubbleEvent);
});
function bubbleEvent(e) {
console.log(e.target.className);
}
/*
el3
el2
el1
*/위의 코드에서는 class 명이 el3인 element( 이처럼 이벤트가 발생한 요소로부터 상위요소로 전파시키는 이벤트 전파 방식을 이벤트 버블링이라고 한다. 이벤트 캡쳐(Event Capture)<body>
<div class="el1">
<div class="el2">
<div class="el3">
</div>
</div>
</div>
</body>var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', captureEvent, {
capture : true
});
});
function captureEvent(e) {
console.log(e.target.className);
}
/*
el1
el2
el3
*/이벤트 캡쳐(Event Capture)를 테스트하기 위해 위의 코드에서는 마찬가지로 class 명이 el3인 element( 이에 따라 결과 값은 el3부터 el1까지 상위 요소부터 콘솔에 출력되고 있다. 이처럼, 이벤트가 발생했을 때, 상위 요소부터 하위요소로 전파시키는 이벤트 전파 방식을 이벤트 캡쳐라고 한다. 이벤트 위임(Event Delegation)이벤트 위임은 하위 요소 각각에 이벤트를 구현하지 않고 상위 요소에서 하위요소의 이벤트를 제어하는 방식이다. <body>
<ul class="list">
<li>
<input type="checkbox" id="one"/>
</li>
<li>
<input type="checkbox" id="two"/>
</li>
</ul>
</body>var items = document.querySelectorAll('input');
items.forEach(function(item) {
item.addEventListener('click', function(e) {
console.log(e.target.id);
});
});위의 코드를 보면 각각의 쉽게 말해, 위의 코드에서 li를 특정 버튼을 눌러 추가한 이후, 그 요소를 클릭하면 위의 js코드가 작동하지 않는다는 것이다. /*
var items = document.querySelectorAll('input');
items.forEach(function(item) {
item.addEventListener('click', function(e) {
console.log(e.target.id);
});
});
*/
//이벤트 위임 방식으로 코드 변경
var items = document.querySelector('.list');
items.addEventListener('click', function(e) {
console.log(e.target.id);
});위의 수정된 코드를 보면, 이벤트 줄 요소를 해당 요소가 아닌 그 상위 요소인 이벤트 위임(Event Delegation)의 장점
|
🙏 Reference
The text was updated successfully, but these errors were encountered: