IT/부스트코스

부스트코스 웹앱개발 -3 Event delegation

은세고화 2020. 4. 23. 18:52
반응형

list가 여러개인 ui에 각각 비슷한 이벤트를 걸어서 처리하는법

1.기본적인방법

<html>
    <body>
<ul>
    <li>
      <img src="https://images-na.,,,,,/513hgbYgL._AC_SY400_.jpg" class="product-image" >    </li>
    <li>
      <img src="https://images-n,,,,,/41HoczB2L._AC_SY400_.jpg" class="product-image" >    </li>
    <li>
      <img src="https://images-na.,,,,51AEisFiL._AC_SY400_.jpg" class="product-image" >  </li>
   <li>
      <img src="https://images-na,,,,/51JVpV3ZL._AC_SY400_.jpg" class="product-image" >
   </li>
  </ul>
  <section class="log"></section>
  <script src="2.eventdelegation.js"></script>
</body>
  </html>

클릭했을　때　이미지　ｓｒｃ를　찍어보자

var log = document.querySelector(".log");
var lists = document.querySelectorAll("ul > li");

for(var i=0, len=lists.length; i < len; i++){
    //에러가걸릴경우 debugger;로 멈추고 브라우저로 점검함
    lists[i].addEventListener("click", function(evt){
   //이미지의 주소값찍기
   log.innerHTML = "clicked" + evt.currentTarget.firstElementChild.src;
    })
}

２．효율적인　방법

이벤트　버블링을　이용한　방법이다．

이벤트　버블링이란　ｕｌ　＞　ｌｉ　＞　ｉｍｇ　가　있다면

ｕｌ에다　이벤트를　걸어도　ｉｍｇ까지　실행되는　것이다．

ｅｖｅｎｔ．ｃｕｒｒｅｎｔＴａｒｇｅｔ을　한　후　ｉｍｇ를　누르면　ｕｌ이　나오고

ｅｖｅｎｔ．ｔａｒｇｅｔ을　하면　클릭한　ｉｍｇ가　나온다．

즉　큰곳에　이벤트를　걸어두면　작은곳은　알아서　걸린다는　것이다．

이를　활용해　ｄｂ에　추가되는　ｌｉ들을　ｕｌ에　이벤트리스너를　등록해버리면

나머지는　알아서　실행된다．

버블링은　안에서　밖으로　실행되고　캡처는　반대로　밖에서　안으로　실행되는데

캡처는　잘　안쓰인다．　코드로　살펴보면

var log = document.querySelector(".log");
var ul = document.querySelector("ul");

ul.addEventListener("click", function(evt){
    if(evt.target.tagName == "IMG"){
        log.innerHTML = "clicked" + evt.target.src;
        
    } else if(evt.target.tagName == "li"){
        log.innerHTML = "clicked" + evt.target.firstElementChild.src;
    }
})

ｉｍｇ부분　약간　옆　부분이　ｌｉ로　표시돼있어서　그부분도　포함시키려고　ｅｌｓｅ　ｉｆ　를　사용했다．

반응형
저작자표시 (새창열림)