[230418] Date 실습 | 이벤트

💻 Date 실습

https://github.com/yoonmallang22/JavaScript/blob/main/practice/calendar.html

해당 달이 무슨 요일에 시작하는지 알아내는 방법

const time = new Date(newYear, newMonth - 1, 1).getDay();

해당 달이 몇 일이나 있는지 알아내는 방법

// const timeLength = 32 - new Date(newYear, newMonth - 1, 32).getDate();
const timeLength = new Date(newYear, newMonth, 0).getDate();

🪄 이벤트

이벤트의 this
이벤트 리스너 함수 내부에서의 this 값은 이벤트가 연결된 노드를 참조한다
event.currentTarget 속성의 참조값과 유사하다
그러나 이벤트 리스너 함수를 화살표 함수로 쓴다면 this가 가리키는 대상이 달라진다

<article class="parent">
  <ol>
    <li><button class="btn-first" type="button">버튼1</button></li>
    <li><button type="button">버튼2</button></li>
    <li><button type="button">버튼3</button></li>
  </ol>
</article>

<script>
const btnFirst = document.querySelector('.btn-first')

const myObj = {
	nameObj: "testObj",
	test() {
		btnFirst.addEventListener('click', function (event) {
			console.log(this);	// btnFirst
			console.log(event.currentTarget);	// btnFirst
		});
		btnFirst.addEventListener('click', (event) => {
			console.log(this);	// myObj
			console.log(event.currentTarget);	// btnFirst
		});
	}
};

myObj.test();
</script>

preventDefault()
브라우저의 기본 이벤트 동작을 취소한다
브라우저는 HTML 태그를 통해 여러가지 기능들을 제공하는데, 브라우저의 기본 동작을 중지하고 자바스크립트를 통해 기능을 처리하고자 할때 사용한다

document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  alert('해당 페이지에서는 오른쪽 클릭을 제한합니다.');
});

stopPropagation()
이벤트 전파를 막는다

<form action="">
	<button type="submit" class="submit">제출</button>
</form>

<script>
	const submit = document.querySelector('.submit');
	submit.addEventListener('click', (event) => {
	    console.log('clicked');
	    event.preventDefault();
		event.stopPropagation();
	});
	
	document.body.addEventListener('click', () => {
	    console.log('event still alive!');	// 출력X
	});
</script>

💻 캐러셀 만들기 실습
https://github.com/yoonmallang22/JavaScript/tree/main/practice/carousel

• transform-style: preserve-3d;
  Indicates that the children of the element should be positioned in the 3D-space.

• clientX, clientY: 브라우저 뷰포트 기준
  screenX, screenY: 사용자 모니터 기준