반응형
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;
}
})ｉｍｇ부분 약간 옆 부분이 ｌｉ로 표시돼있어서 그부분도 포함시키려고 ｅｌｓｅ ｉｆ 를 사용했다．
반응형
'IT > 부스트코스' 카테고리의 다른 글
| 부스트코스 웹앱개발 -6 스프링JDBC (0) | 2020.04.30 |
|---|---|
| 부스트코스 웹앱개발 -5 스프링 (0) | 2020.04.28 |
| 부스트코스 웹앱개발 -2 AJAX (0) | 2020.04.22 |
| 부스트코스 웹 앱 개발-1: 자바스크립트 배열 및 오브젝트 (0) | 2020.04.01 |
| DAO와 DTO사용 이유/getter setter (1) | 2020.02.29 |