반응형
.stage{
overflow: hidden;
position: relative;
/* vw : viewport width */
/* vh : viewport height */
width: 100vw;
height: 75vw;
/* 4:3비율 */
background-color: yellow;
}
@keyframes moving{
from {
transform: translateX(0);
}
to{
transform: translateX(90vw);
}
}
.among{
position: absolute;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
.among:nth-of-type(1){
animation:moving 5s infinite alternate;
left: 5%;
bottom: 5%;
background-image: url('../images/1.png');
}
.among:nth-of-type(2){
animation:moving 9s infinite alternate;
left: 10%;
bottom: 3%;
background-image: url('../images/2.png');
}
.among:nth-of-type(3){
animation:moving 3s infinite alternate;
left: 7%;
bottom: 10%;
background-image: url('../images/3.png');
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/02_02.css">
</head>
<body>
<div class="stage">
<div class="among"></div>
<div class="among"></div>
<div class="among"></div>
</div>
</body>
<script>
(function () {
const amongGroup = document.querySelectorAll('.among');
const stage = document.querySelector('.stage');
function removeHandler(e) {
stage.removeChild(e);
}
function clickHandler(e) {
// removeHandler(this);
this.parentNode.removeChild(this);
}
for (let i = 0; i<amongGroup.length; i++) {
amongGroup[i].addEventListener('click', clickHandler);
}
})();
</script>
</html>function 같은 경우 전역말고 지역으로 표현하귀이해서 함수를 호출해서 변수들을 선언.
이렇게하면은 외부에서 접근하지 못한다.
두번째로는 clickEventListener 에 this는 객체자체가된다.
따라서 this.parentNode.removeChild(this)로 현재 값을 삭제할 수 있음.
target을 활용해서 좀더 최적화 해보자.
(function () {
const stage = document.querySelector('.stage');
function clickHandler(e) {
if (e.target.classList.contains('among')) {
stage.removeChild(e.target);
}
}
stage.addEventListener('click', clickHandler);
})();stage는 among을 가지고있는 부모 컨테이너이다.
stage 자체에 click 리스너를 만들어준다음 stage안에서 클릭이벤트가 발생하면 함수를 실행시킨다.
stage 본인을 클릭할경우는 예외처리를 해주고 위처럼 작동하면 위와 같은 동작을 할 수있다.
위와의 차이점은 위는 자식의 수만큼 리스너에 등록한다. 즉 함수자체가 100개면 100개 등록해야되서 메모리낭비인 소리. 하지만 이처럼 하나의 등록으로 똑같은 기능을 구현할 수 있다.
반응형
'개인공부' 카테고리의 다른 글
| javascript 클릭리스너 활용 (0) | 2021.01.01 |
|---|---|
| 이벤트 위임 (2) | 2020.12.30 |
| CSS : relative 와 absolute 정복 (0) | 2020.12.28 |
| 의미론적 태그 (0) | 2020.12.21 |
| caching (0) | 2020.11.15 |
