반응형
Event Bubbling vs. Capturing
글. 수알치 오상문
HTML 요소는 트리 구조 형태로 계층 관계가 존재한다. 어떤 요소에 특정 이벤트가 발생했을 때 부모쪽으로 전파될 수도 있고 자식쪽으로 전파될 수도 있다.
Bubbling : 부모쪽으로 이벤트가 전파 (기본)
Capturing : 자식쪽으로 이벤트가 전파 (옵션)
다음 예제 코드는 세 개 제품 이미지 항목을 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Click Event</title>
</head>
<body>
<ul>
<li> <img src="product1.jpg" class="product-img" > </li>
<li> <img src="product2.jpg" class="product-img" > </li>
<li> <img src="product3.jpg" class="product-img" > </li>
</ul>
<section class="info"></section>
</body>
</html>
어떤 이미지를 클릭하면 동작하는 자바스크립트 예는 다음과 같다.
[예제 코드] Bubbling을 이용하여 부모 ul 태그에서 처리
// 자식 li에 발생한 이벤트를 부모 ul에서 처리
ul.addEventListener("click",function(evt) {
console.log(evt.currentTarget, evt.target);
info.innerHTML = "click event!!! : " + evt.target.src;
});
[예제 코드] 클릭한 이미지 src 정보 확인 예제 (이미지나 패딩 부분 클릭 시 동작)
var ul = document.querySelector("ul");
ul.addEventListener("click",function(evt) {
if(evt.target.tagName === "IMG") {
console.log("clicked" + evt.target.src);
info.innerHTML = "click event!!! : " + evt.target.src;
} else if (evt.target.tagName === "LI") {
console.log("clicked" + evt.target.firstChild.src);
info.innerHTML = "click event!!! : " + evt.target.firstChild.src;
}
});
[예제 코드] 안 좋은 예 (이미지마다 이벤트 설정)
var list = document.querySelectorAll("ul > li");
for(var i=0,len=list.length; i < len; i++) {
list[i].addEventListener("click", function(evt) {
// 이벤트 발생 시 처리...
consol.log("clicked" + evt.currentTarget.firstChild.src);
info.innerHTML = "click event!!! : " + evt.currentTarget.firstChild.src;
});
}
[참고] https://javascript.info/bubbling-and-capturing
Bubbling and capturing
javascript.info
반응형
'JavaScript, jQuery' 카테고리의 다른 글
| 자바스크립트, input type="date" 달력 값 변경하기 (0) | 2022.06.18 |
|---|---|
| HTML 포맷에 맞게 객체 값을 넣어서 출력하는 예제 (0) | 2022.06.10 |
| DOMContentLoaded vs. Load 이벤트 (0) | 2022.06.09 |
| 자바스크립트, 객체 자료형 예제 (0) | 2022.06.08 |
| HTML 단추 클릭하면 단추 제목 변경 후 비활성 상태로 만들기 (0) | 2022.06.08 |