[ javascript ] 14. this, target과 currentTarget, dataset, animate

javascript+es6

[ javascript ] 14. this, target과 currentTarget, dataset, animate

변쌤(이젠강남) 2023. 9. 27. 12:28

1. this
2. target과 currentTarget의 차이점
3. dataset
4. animate
5. transition

# this : 이벤트 한 자기 자신

<input type="button" value="확인" onclick="alert(event.type)">

결과 : click

<input type="button" value="짜장면" onclick="alert(this.value)">

자신의 값 -> 짜장면

<input type="button" value="짜장면" onclick="alert(value)">

결과 : 짜장면

예)

<input type="button" id="btn" value="짜장면" onclick="showAlert()">

let btn = document.querySelector('#btn');

btn.onclick = function() {
//this  -> 이벤트한 대상
//클릭한 자기자신
    alert(this.id); 
    alert(this.value); 
};

예)

    <label for="message">메세지</label>
    <input placeholder="메세지를 입력하세요" id="message" name="message">
    <p id="result">xxx</p>

const message = document.querySelector('#message');
const result = document.querySelector('#result');
message.addEventListener('input', function () {
    result.textContent = this.value;
});

# current와 currentTarget 차이점

target은 이벤트가 발생한 바로 그 요소를 직접 가리키고 ( 선택한 대상 )

currentTarget은 이벤트 리스너(EventListener)를 가진 요소를 가리킵니다. ( 이벤트가 있는 대상 )

  <div id="btn">
    <button id="btnRed">Red</button>
    <button id="btnGreen">Green</button>
    <button id="btnBlue">Blue</button>
  </div>
  <h2 id="message"> 여기에 결과 나오기 </h2>

let div = document.getElementById('btn');

div.addEventListener('click', (event) => {
    let target = event.target;
    
    switch (target.id) {
        case 'btnRed':
            changeColor('red');
            break;
        case 'btnGreen':
            changeColor('green  ');
            break;
        case 'btnBlue':
            changeColor('blue');
            break;
    }
});

const changeColor = (newColor) => {
    const element = document.getElementById('message');
    element.style.color = newColor;
}

# dataset

요소에 사용자 정의 속성을 추가하려면 data-. 로 data-secured시작하는 모든 속성은 data-개발자용으로 예약되어 있기 때문에 속성을 data-*사용할 수 있습니다

data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.

<div id="main" data-progress="pending" data-value="10%"></div>

선택자.dataset.속성명

let bar = document.querySelector('#main');
console.log(bar.dataset);
console.log(bar.dataset.progress);

# animate

animate(keyframes, options)

예)
img.animate( [{opacity:0},{opacity:1}] , 400 }

예)
img.animate(
  {
    opacity: [0, 1],
    transform: ["scaleX(0)", "scaleX(1)"],
  },
  {
    fill: "both",
    duration: 1,
    timeline,
    rangeStart: "cover 0%",
    rangeEnd: "cover 100%",
  },
);

예)
img.animate([
  	{ transform: "translateX(0px)" },
    { transform: "translateX(400px)", easing: "ease-out" },
    { transform: "translateY(600px)", easing: "ease-in" },
    { transform: "translateX(800px)" }
], 3000);

예)
img.animate([
    { transform: "translateX(0px)" },
    { transform: "translateX(400px)", offset: 0.7 },
    { transform: "translateY(600px)", offset: 0.8 },
    { transform: "translateX(800px)" }
], 3000);

예)
div.animate({
  	backgroundColor: ["#F00000", "#00FF00"], // [from, to]
    color: ["#000", "#FFFFFF"] // [from, to]
}, 3000);

options

1. delay : 애니메이션을 지연시키는 시간을 밀리초(milliseconds)로 설정. 생략 가능하며 기본 값은 0

2.direction : 애니메이션의 실행 방향을 normal(정방향), reverse(역방향), alternate(정방향후 역방향), alternate-reverse(역방향후 정방향)로 설정. 기본 값은 normal

3.duration : 애니메이션이 완료되는 시간을 밀리초(milliseconds)로 설정한다. 선택사항이지만 기본값은 0이므로 설정하지 않는다면 애니메이션이 실행되지 않습니다.

4.easing : 애니메이션의 속도 변화를 지정한다. 사전에 정의된 값은 linear, ease, ease-in, ease-out, ease-in-out로 지정할 수 있으며 cubic-bezier() 함수도 사용이 가능한다. 생략할 수 있으며 기본 값은 linear

5.iterations : 애니메이션이 반복되는 횟수를 지정한다. 기본 값은 1이며 요소가 존재하는 한 반복될 수 있도록 Infinity 키워드를 사용가능

테스트 해보세요

<body>
    <h1 id="heading">JavaScript animate TEST</h1>
</body>

// 요소 가져오기
const heading = document.querySelector('#heading');
heading.animate(
  {
    transform: [
      'translateX(0px) rotate(0deg)', // 시작값
      'translateX(800px) rotate(360deg)' // 종료값
    ]
  },
  {
    duration: 3000, // 밀리초 지정
    iterations: Infinity, // 반복 횟수
    direction: 'normal', // 반복 작업 방식
    easing: 'ease' // 가속도 종류
  }
);

const heading = document.querySelector('#heading');

const keyframes = {
  opacity: [0, 1],
  translate: ['0 50px', 0],
};
const options = {
  duration: 2000,
  easing: 'ease',
};

heading.animate(keyframes, options);

const heading = document.querySelector('#heading');

const keyframes = {
  opacity: [0, 1],
  rotate: ['x 360deg', 'x 0deg'],
};
const options = {
  duration: 1000,
  easing: 'ease',
};

heading.animate(keyframes, options);

const heading = document.querySelector('#heading');

const keyframes = {
  color: ['#f66', '#fc2', '#0c6', '#0bd']
};
const options = {
  duration: 8000,
  direction: 'alternate',
  iterations: Infinity,
};

heading.animate(keyframes, options);

const heading = document.querySelector('#heading');

const keyframes = {
  color: ['transparent', '#fff'],
  backgroundPosition: ['100% 0', '0 0'],
};
const options = {
  duration: 1000,
  easing: 'ease',
};

heading.animate(keyframes, options);

const heading = document.querySelector('#heading');

const keyframes = {
  borderRadius: [
      '20% 50% 50% 70%/50% 50% 70% 50%',
      '50% 20% 50% 50%/40% 40% 60% 60%',
      '50% 40% 20% 40%/40% 50% 50% 80%',
      '50% 50% 50% 20%/40% 40% 60% 60%',
    ],
};
const options = {
  duration: 8000,
  direction: 'alternate',
  iterations: Infinity,
};

heading.animate(keyframes, options);

결과

# transiton

transition
transitionstart	mdn
transitionend	mdn
transitionrun	mdn

transitionstart와 transitionend 이벤트는 CSS 트랜지션의 시작과 끝을 감지하는 데 사용됩니다. 예를 들어, 어떤 요소에 CSS 트랜지션을 적용하고 그 트랜지션이 시작되거나 끝났을 때 특정 동작을 수행하고자 할 때 이 이벤트들을 활용할 수 있습니다.

예)

css

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 3s;
}

html

 <div class="box"></div>


let box = document.querySelector('.box');


box.addEventListener('transitionstart', function (event) {
    box.textContent = '시작';
});


box.addEventListener('transitionend', function (event) {
    box.textContent = '종료';
});


setTimeout(function () {
    box.style.width = '400px';
}, 500);

예)

<div class="transition">Hover over me</div>
<div class="message"></div>

.transition {
  width: 100px;
  height: 100px;
  background: rgb(255 0 0 / 100%);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgb(255 0 0 / 0%);
}

const el = document.querySelector(".transition");
const message = document.querySelector(".message");

el.addEventListener("transitionrun", () => {
  message.textContent = "진행중";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "시작";
});

el.addEventListener("transitionend", () => {
  message.textContent = "완료";
});

'javascript+es6' 카테고리의 다른 글

[ javascript ] 16. createElement , append, prepend , video, table (0)	2023.10.15
[ javascript ] 15. className , classList, getComputedStyle (0)	2023.09.27
[ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault (0)	2023.09.27
[ javascript ] 12. 이벤트 종류와 작성법 (0)	2023.09.24
[ javascript ] 11. DOM 선택, 출력, 속성,탐색 (0)	2023.09.24

현재글[ javascript ] 14. this, target과 currentTarget, dataset, animate

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

fullstack-study