Post
이벤트 위임(Event Delegation)
(1) 사전 설정
HTML
<body>
<div class="contents-box"></div>
</body>
SCSS
body {
background-color: black;
.contents-box {
background-color: white;
width: 150px;
height: 150px;
margin: 10% auto;
}
}
JavaScript
const contents = document.querySelector(".contents-box");
setTimeout(function () {
contents.innerHTML = `<div class="title">테스트 텍스트</div>`;
}, 3000);
ON BROWSER
아무것도 없는 빈 contents-box에 3초뒤 "테스트 텍스트" 가 나타나도록 설정
(2) 동적으로 생성된 개체에 querySelector???
JavaScript
const contents = document.querySelector(".contents-box");
const title = document.querySelector(".title");
setTimeout(function () {
contents.innerHTML = `<div class="title">테스트 텍스트</div>`;
}, 3000);
title.addEventListener("click", function () {
alert("테스트 텍스트를 클릭함");
});
console.log(title);
ON BROWSER
querySelector&addEventListener로는 동적으로 생성된 개체에 이벤트를 걸 수가 없음
(3) .target을 활용한 이벤트 위임(Event Delegation)
JavaScript
const contents = document.querySelector(".contents-box");
setTimeout(function () {
contents.innerHTML = `<div class="title">테스트 텍스트</div>`;
}, 3000);
contents.addEventListener("click", function (e) {
if (e.target.closest(".title")) {
alert("테스트 텍스트를 클릭함");
}
});
ON BROWSER
그러나 부모 개체에 이벤트를 위임한 상태에서 e.target으로 최하단 태그를 붙잡은 뒤, .closest를 활용해 특정해내면 이벤트를 발생시킬 수 있게 된다.
'JavaScript related' 카테고리의 다른 글
| JavaScript reduce (0) | 2023.02.01 |
|---|---|
| JavaScript beforeunload (0) | 2023.02.01 |
| JavaScript target & currentTarget (0) | 2023.01.31 |
| JavaScript destructuring (0) | 2023.01.30 |
| JavaScript How to Insert Text (0) | 2023.01.27 |