day13

📖 이벤트에서 this 활용하기

this : 이벤트 발생한 자기자신 요소
()=> 화살표함수 -> 이벤트.target(발생요소)
(e)=> -> e.target // 화살표:target

forEach() => 여러개를 가진 요소한테 쓸 수 있는
function() -> this

<style>
	.box {
  		width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 30px;
    }
  
  	.bgColor-red {
  		background-color: red;
  	}
		
</style>

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

<script>
	const boxes = document.querySelectorAll('.boxes');

	boxes.forEach( //boxes의 각각 item
    	(item)=> {
        	item.addEventListener('click', function(){
              //this.style.backgroundColor = 'red';
            this.classList.toggle('bgColor-red');
            }); // on,off기능 ! 
        }
      )

	for (let item of boxes) {
    	item.addEventListener('click', (e)=>{
        	e.target.style.backgroundColor = 'red';
        });
    }
</script>

=> 💻


=> 각각 박스를 클릭하면 red로 바뀌고 또 클릭하면 원래상태로 돌아온다!

📖 window 객체 활용 - 주요 속성 및 함수

🖐 @ 시간 기준 : ms 1000 -> 1초
setTimeout(함수, 지연시간ms) : 일정 시간 뒤에 함수 실행
setInterval(함수, 시간간격ms) : 일정 시간 간격으로 계속 함수 실행
clearInterval(대상인터벌) : Interval 걸린걸 해제

<style>
	#box {
		width: 100px;
        height: 100px;
        border: 1px solid black;
        position: relative;
        left: 0px;
    }
</style>

<button id="btn1">timeout</button>
<button id="btn2">interval</button>
<button id="btn3">clearinterval</button>
<div id="box"></div>

<script>
	const box = document.getElementById('box');

  	document.getElementById('btn1').addEventListener('click', ()=>{
		setTimeout(()=>{
    		box.style.backgroundColor = 'red';
    	}, 1000); //btn1 누르면 1초후에 box가 red로 바뀜
	});

	let box_left = 0;
	let boxMoveInterval; //같이쓰이려면 전역변수로 쓰여야함
	document.getElementById('btn2').addEventListener('click', ()=>{
    	boxMoveInterval = setInterval(()=>{ // 어떤 인터벌을 클리어하는지 명시하기 위해 변수로 담아둔다
        	box_left += 10;
            box.style.left = box_left + "px"; //1초마다 10px씩 왼쪽으로 이동
        }, 1000);          
    });

	document.getElementById('btn3').addEventListener('click', ()=> {
   		clearInterval(boxMoveInterval); //클리어 버튼을 눌렀을때 멈춰지게끔!
	});
</script>

=> 💻

=> timeout을 누르면 1초 후에 박스가 red로 바뀌고

=> 💻

=> interval을 누르면 1초마다 왼쪽으로 10px씩 이동

=> 💻

=> clearInterval을 누르면 정지!

🚨 인터벌 누를때마다 인터벌이 쌓아져가는거야! 중복실행이 된다
그래서 인터벌 생성 전에 기존 인터벌 클리어를 해줘야 한다
!

let box_left = 0;
let boxMoveInterval; //같이쓰이려면 전역변수로 쓰여야함
	document.getElementById('btn2').addEventListener('click', ()=>{
    🚨clearInterval(boxMoveInterval);🚨
    boxMoveInterval = setInterval(()=>{ // 어떤 인터벌을 클리어하는지 명시하기 위해 변수로 담아둔다
     	box_left += 10;
        box.style.left = box_left + "px"; //1초마다 10px씩 왼쪽으로 이동
    }, 1000);          
});