Post
Target & Current Target
HTML
<body>
<div class="background">
<div class="contents-box">
<div class="title">테스트 제목</div>
<div class="phone">테스트 전화번호</div>
<div class="address">테스트 주소</div>
<button class="close"><span class="material-icons">close</span></button>
</div>
</div>
</body>
SCSS
.background {
background-color: black;
width: 800px;
height: 600px;
.contents-box {
background-color: white;
position: absolute;
top: 25%;
left: 25%;
}
}
JavaScript
const contents = document.querySelector(".contents-box");
contents.addEventListener("click", function (e) {
console.log(e);
});
ON BROWSER
마우스 클릭시, 오직 하얀 div 안에서만 콘솔이 찍히며 배열의 형태로 클릭 정보가 뜬다.
Target
JavaScript
const contents = document.querySelector(".contents-box");
contents.addEventListener("click", function (e) {
console.log(e.target);
});
ON BROWSER
위에서부터 차례대로 테스트 제목, 테스트 전화번호, 테스트 주소, 닫기 버튼을 클릭했을 때
즉, console.log(e.target)을 쓰면 이벤트가 전달되는 최하위 태그 정보를 표시하게 된다.
Current Target
JavaScript
const contents = document.querySelector(".contents-box");
contents.addEventListener("click", function (e) {
console.log(e.currentTarget);
});
ON BROWSER
위에서부터 차례대로 테스트 제목, 테스트 전화번호, 테스트 주소, 닫기 버튼을 클릭했을 때
즉, currentTarget을 쓰면 상위 태그에 대한 정보가 표시된다.
'JavaScript related' 카테고리의 다른 글
| JavaScript beforeunload (0) | 2023.02.01 |
|---|---|
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript destructuring (0) | 2023.01.30 |
| JavaScript How to Insert Text (0) | 2023.01.27 |
| JavaScript innerHTML (0) | 2023.01.27 |