2019. 5. 15. 17:22ㆍJavaScript
ul > li 로 list를 만들어서 각각의 list에 이벤트를 걸어준다면 어떻게 할까?
아마 처음에 든 생각은 "for문 돌리면 되는 거 아냐?"였습니다.
그런데 list가 100개라 치면, 그 100개 모두 이벤트 핸들러를 바인딩하면...실행 속도도 느려지고 브라우저에 넘길 일이 많아집니다. 만약 일일히 다 작성하면 코드 또한 많아지고 지저분해 질 수 있습니다.
또, 동적으로 list가 추가 된다면 추가되기 전 DOM에는 존재하지 않는 element므로 이벤트 핸들러를 바인딩 할 수 없습니다.
-->이런 경우 이벤트 위임(event delegation)을 사용하면 더할 나위 없습니다.
<body>
<ul>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ41mCHO0IkfLajcJLUptfUSzzGbDbW4ms3L1Nw3Jsx6DAMZD27" class="product-img"></li>
<li><img src="https://png.pngtree.com/element_origin_min_pic/16/11/18/753070ccac2c3d226e15ccc0f011041e.jpg" class="product-img"></li>
<li><img src="http://www.koya-culture.com/data/photos/201604/103289_28771_1818.jpg" class="product-img"></li>
<li><img src="http://mblogthumb3.phinf.naver.net/20160321_218/josa1987_1458557324908vBG1C_JPEG/0DDDF1458527852153.jpg?type=w800" class="product-img"></li>
</ul>
<section class="log"></section>
<script src="delegate.js"></script>
</body>
const log = document.querySelector(".log");
const lists = document.querySelectorAll("li");
// 1. forEach문을 이용해 li를 순회하며 event listener를 준다.
lists.forEach(ele =>{
ele.addEventListener("click", function(evt){
log.innerHTML = "img URL : " + evt.currentTarget.firstChild.src;
})
})
// 2. event의 target을 이용해 해당 클릭 이벤트 타겟의 정보를 넘겨준다.
const ul = document.querySelector("ul");
ul.addEventListener("click",function(evt) {
console.log(evt.currentTarget);
console.log(evt.target);
log.innerHTML = "img URL: " + evt.target.src;
});
이벤트 위임(event-delegation)은 다수의 child-element에 각각 이벤트 핸들러 바인딩 X --> 대신 하나의 parent-element에 이벤트 핸들러를 바인딩합니다. 위에 경우 li에 forEach로 하나씩 이벤트 핸들러를 바인딩 하는 대신에 ul에 이벤트 핸들러를 바인딩 했습니다!! event.target을 이용하면 해당 클릭 이벤트가 발생한 element를 잡아줍니다.
DOM에 새로운 child-element인 list를 추가해도 event처리는 parent-element인 ul로 이벤트가 위임되었기 때문에 새로운 요소에 이벤트 핸들러를 바인딩 할 필요가 없습니다:)
ex) event.target.id / event.target.src 처럼 event.target으로 접근해 값을 가져올 수 있습니다.
이벤트 버블링
하위의 Element(위의 코드에서는 li, img)을 클릭해도 ul이 실행됩니다. 이렇게 클릭 이벤트가 하위 엘리먼트에서 일어나도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트 핸들러를 찾는 과정을 이벤트 버블링이라고 합니다.
el>li>img 순서로 감싸져 있으니 img를 클릭하면 img>li>el순서로 이벤트가 발생합니다:>
[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다
'JavaScript' 카테고리의 다른 글
| [JavaScript] var / const / let 와 scope 끄적끄적 (0) | 2019.05.19 |
|---|---|
| [JavaScript] HTML templating (0) | 2019.05.15 |
| [JavaScript] JavaScript에서 애니메이션(setTimeout, requestAnimationframe) (0) | 2019.05.13 |
| [JavaScript] XmlHttpRequest을 이용한 ajax (Asynchronous Javascript And XML) (0) | 2019.05.11 |
| [JavaScript] 자바스크립트 객체(Object) (0) | 2019.05.08 |