• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 이벤트 리스너와 스크롤 감지

이벤트 리스너(EventListener)

이벤트 리스너는 웹 페이지에서 사용자의 특정 행동(이벤트)을 감지하고, 그에 대한 반응을 정의하는 코드입니다. 이벤트는 클릭, 입력, 마우스 오버 등 다양한 종류가 있으며, 이벤트 리스너는 이러한 이벤트가 발생할 때 자동으로 실행되는 함수를 설정할 수 있습니다.

// 윈도우
window.addEventListener("scroll" , () => { ... })

// 엘리먼트
window.document
	.getElementById("HTML_나의디브")
	.addEventListener("scroll", () => { ... });

위 예시를 보면, window.addEventListener("scroll", () => { ... }); 이 부분은 스크롤 이벤트를 감지하는 이벤트 리스너를 설정합니다.(엘리먼트도 동일하게 생각해주면 됩니다.)

• window.addEventListener("scroll", ...):
  • scroll 이벤트는 사용자가 페이지를 위아래로 스크롤할 때 발생합니다. (이 위치에는 이벤트의 종류를 추가해주면 됩니다.)
  • window는 전체 브라우저 창을 의미하며, addEventListener 메서드를 통해 특정 이벤트(여기서는 scroll)가 발생할 때 실행할 함수를 등록합니다.
• () => { ... }:
  • 이 부분은 화살표 함수로, 스크롤 이벤트가 발생할 때 실행되는 코드 블록입니다. 즉, 스크롤할 때마다 이 함수 안의 코드가 실행됩니다.

스크롤 감지

// 윈도우
window.addEventListener("scroll" , () => {
	const 스크롤내려간길이 = window.scrollY;
	console.log(`스크롤이 ${스크롤내려간길이}만큼 내려갔습니다.`);
	
	if(스크롤내려간길이 > 0) {
		document.getElementById("HTML_이미지상자").style = "border: 20px solid red;";
	} else {
		document.getElementById("HTML_이미지상자").style = "border: none;";
	}
})

// 엘리먼트
window.document
	.getElementById("HTML_나의디브")
	.addEventListener("scroll", () => {
		const 스크롤내려간길이 =
			window.document.getElementById("HTML_나의디브").scrollTop;
		console.log(`스크롤이 ${스크롤내려간길이}만큼 내려갔습니다.`);

		if (스크롤내려간길이 > 0) {
			document.getElementById("HTML_이미지상자").style =
				"border: 20px solid red;";
		} else {
			document.getElementById("HTML_이미지상자").style =
				"border: none;";
		}
});

• **scrollY**는 현재 페이지에서 수직으로 얼마나 스크롤 했는지를 픽셀 단위로 반환합니다.
• scrollTop: 선택한 요소의 수직 스크롤 위치를 픽셀 단위로 반환합니다. 요소의 내용이 스크롤 된 양을 의미하며, 페이지 상단에서 스크롤 된 거리입니다.

📝 실습 코드