이벤트 버블링을 멈춰야 하는 경우와 처리방법

부모는 자식에게 버블링으로인해 무조건 이벤트를 전달하므로 비효율적으로 이벤트가 실행될 수 있다.
e.stopPropagation(); --> 전파를 막는다.
메소드를 이용해 불필요한 버블링을 차단할 수 있다.
HTML

    <section id="section3">
        <h1>Ex3-이벤트 버블링 멈추기 </h1>
        <div class="img-list">
            <img class="img" src="images/img1.jpg" style="height: 50px;" />
            <img class="img" src="images/img2.jpg" style="height: 50px;" />
            <img class="img" src="images/img3.jpg" style="height: 50px;" />
            <input class="add-button" type="button" value="추가" />
        </div>
        <div>
            <img class="current-img" src="images/img1.jpg" style="border:1px solid red;" />
        </div>
    </section>
    <hr />

JavaScript

// Ex3-이벤트 버블링 멈추기
window.addEventListener("load",function(){
    var section = document.querySelector("#section3");

    var imgList = section.querySelector(".img-list");
    var currentImg = section.querySelector(".current-img");
    var addBtn = section.querySelector(".add-button"); 
    
    imgList.onclick = function(e){
        console.log("imgList.onclick"); 
        if(e.target.nodeName != "IMG") return;
        currentImg.src = e.target.src;
    }
    
    addBtn.onclick = function(e){
        e.stopPropagation(); //버블링 멈춤.
        
        console.log("addBtn.onclick");
        var img = document.createElement("img");
        img.src = "images/img1.jpg";
        currentImg.insertAdjacentElement("afterend",img);
    }
});

결과: 추가 버튼을 눌러도 imgList.onclick 이벤트는 발생하지 않는다.