[버블링]아직 만들어지지 않은 요소 이벤트 처리하기

버블링을 활용하면 아직 만들어지지 않은 요소에서 발생하는 이벤트를 처리 할 수 있다.

 

아래와 같은 html코드가 있을때

<button class="add">add</button>
<ul class="list">
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
</ul>

 

add 버튼을 클릭하면 동적으로 li추가 스크립트

let count=4;
$(".add").click(function(){
    count++
    $(".list").append(`<li>list${count}</li>`);
})

 

먼저 일반 클릭 이벤트를 사용해서 테스트를 해보자

$("ul.list li").click(function() {
    $(this).css('background-color','#ddd');
})

 

결과를 확인하면 새로 만들어진 li에는 색이 변경되지 않는다.

이유는 이벤트를 등록하는 시점에 새로 추가된 li는 존재하지 않아서 이벤트 리스너가 등록되지 않았기 때문이다.

 

이럴때 버블링을 사용하면 신규 항목을 추가해도 이벤트를 등록할 수 있다.

$("ul").on("click", "li", function() {
    $(this).css('background-color','#ddd');
})

대상 선택자 ul을 클릭 두번째 선택자 부분에 li를 추가 하면 이벤트 리스너는 ul에 하나만등록이 되어있고 버블링 과정을 통해 타겟지점에 효과를 줄 수 있다.