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>

클릭했을 때 이미지 src를 찍어보자

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;
    })
}

2.효율적인 방법

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

이벤트 버블링이란 ul > li > img 가 있다면

ul에다 이벤트를 걸어도 img까지 실행되는 것이다.

event.currentTarget을 한 후 img를 누르면 ul이 나오고

event.target을 하면 클릭한 img가 나온다.

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

이를 활용해 db에 추가되는 li들을 ul에 이벤트리스너를 등록해버리면

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

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

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

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;
    }
})

img부분 약간 옆 부분이 li로 표시돼있어서 그부분도 포함시키려고 else if 를 사용했다.

반응형