이벤트 객체의 target 속성 이용하기

HTML

    <section id="section1">
        <h1>Ex 1-선택된 이미지 보여주기:event target </h1>
        <div>
            <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;" />
        </div>
        <div>
            <img class="current-img" src="images/img1.jpg" style="border:1px solid red;" />
        </div>
    </section>

JavaScript

//1. Ex1-선택된 이미지 보여주기:event target
window.addEventListener("load",function(){
    var section = document.querySelector("#section1");

    var imgs = section.querySelectorAll(".img");
    var currentImg = section.querySelector(".current-img");

    for(var i=0; i<imgs.length; i++){
    imgs[i].onclick = function(e){
        //console.log(e.target.nodeName); //현재 선택된 타겟.
        currentImg.src = e.target.src; //src를 현재 선택된 src로 변경
    }
}
});

e.target을 활용하기!