Javascript:이벤트 - 편집 역사

2022년 5월 18일 (수) 09:15에 Sam님의 편집

2022-05-18T09:15:52Z

← 이전 판		2022년 5월 18일 (수) 09:15 판
4번째 줄:		4번째 줄:
	클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다.		클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다.

	~~==클릭 이벤트==~~		<br />
	~~<syntaxhighlight lang="javascript">~~
	~~const 변수 = document.querySelector('.클래스명');~~
	~~function 함수명(){~~
	내용
	~~console.log('clicked')~~
	}

	~~변수.addEventListener('click', 함수명)~~
	</~~syntaxhighlight~~>~~어떤 내용이 클릭되었을 때 함수를 작동시키는 명령.~~

	===더하고 빼고, 변형하고===		===더하고 빼고, 변형하고===

Sam: /* 이벤트 델리게이션 */

2021-06-11T12:22:29Z

이벤트 델리게이션

← 이전 판		2021년 6월 11일 (금) 12:22 판
90번째 줄:		90번째 줄:
	</syntaxhighlight>		</syntaxhighlight>

	== 이벤트 델리게이션 ==		==이벤트 델리게이션==
	event delegation. 클릭이벤트가 일어날 때 매번 다양한 클릭이벤트를 정의하는 것을 막기 위해 사용한다.(for문으로 이벤트를 체크하기도 하지만, 성능에 부하가 걸린다.) 부모에게 걸어준다.		event delegation. 클릭이벤트가 일어날 때 매번 다양한 클릭이벤트를 정의하는 것을 막기 위해 사용한다.(for문으로 이벤트를 체크하기도 하지만, 성능에 부하가 걸린다.) 부모에게 걸어준다.

107번째 줄:		107번째 줄:
	}else if(target.matches('[속성명2="값2"]')){		}else if(target.matches('[속성명2="값2"]')){
	해당 버튼에 대한 명령		해당 버튼에 대한 명령
	target.classList.toggle('on');		target.classList.toggle('on'); // 실시간으로 좋아요 버튼을 활성화하는 등에 쓰인다.
	}		}

	window.addEventListener('click', delegation);		window.addEventListener('click', delegation);
	</syntaxhighlight>		</syntaxhighlight>

Sam: /* 리사이즈 */

2021-06-11T11:00:56Z

리사이즈

@@ 76번째 줄: / 76번째 줄: @@
 </syntaxhighlight>
-== 리사이즈 ==
+==리사이즈==
 resize가 일어날 때의 이벤트.<syntaxhighlight lang="javascript">
 //창의 높이. innerHight. css에선 vh, % 같은 개념.
@@ 88번째 줄: / 88번째 줄: @@
 window.addEventListener('resize', resizeFunc);
 </syntaxhighlight>

Sam: /* 스크롤 */

2021-06-11T10:42:31Z

스크롤

← 이전 판		2021년 6월 11일 (금) 10:42 판
1번째 줄:		1번째 줄:
	{{Javascript}}		{{Javascript}}

	== 개요 ==		==개요==
	클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다.		클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다.

	== 클릭 이벤트 ==		==클릭 이벤트==
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	const 변수 = document.querySelector('.클래스명');		const 변수 = document.querySelector('.클래스명');
15번째 줄:		15번째 줄:
	</syntaxhighlight>어떤 내용이 클릭되었을 때 함수를 작동시키는 명령.		</syntaxhighlight>어떤 내용이 클릭되었을 때 함수를 작동시키는 명령.

	=== 더하고 빼고, 변형하고 ===		===더하고 빼고, 변형하고===
	add 어떤 값을 더한다. remove 어떤 것을 뺀다. toggle 어떤 게 있으면 빼고, 없으면 더한다.		add 어떤 값을 더한다. remove 어떤 것을 뺀다. toggle 어떤 게 있으면 빼고, 없으면 더한다.
	{\| class="wikitable"		{\| class="wikitable"
60번째 줄:		60번째 줄:


	== 스크롤 ==		==스크롤==
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	function scrollFunc(){		function scrollFunc(){
74번째 줄:		74번째 줄:

	window.addEventListener('scroll', scrollFunc);		window.addEventListener('scroll', scrollFunc);
	</syntaxhighlight><br />		</syntaxhighlight>

			== 리사이즈 ==
			resize가 일어날 때의 이벤트.<syntaxhighlight lang="javascript">
			//창의 높이. innerHight. css에선 vh, % 같은 개념.
			//창의 넓이. innerWidth

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

			function resizeFunc(){
			box.style.right = '${innerWidth *0.5}px'; // 해당 위치, 속성값을 바꿀 수 있다.
			}

			window.addEventListener('resize', resizeFunc);
			</syntaxhighlight>

Sam: 새 문서: {{Javascript}} == 개요 == 클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다. == 클릭 이벤트 ==
2021-06-10T15:03:17Z

새 문서: {{Javascript}} == 개요 == 클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다. == 클릭 이벤트 == <syntaxhighlig...

새 문서
{{Javascript}}

== 개요 ==
클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다.

== 클릭 이벤트 ==
<syntaxhighlight lang="javascript">
const 변수 = document.querySelector('.클래스명');
function 함수명(){
내용
console.log('clicked')
}

변수.addEventListener('click', 함수명)
</syntaxhighlight>어떤 내용이 클릭되었을 때 함수를 작동시키는 명령.

=== 더하고 빼고, 변형하고 ===
add 어떤 값을 더한다. remove 어떤 것을 뺀다. toggle 어떤 게 있으면 빼고, 없으면 더한다.
{| class="wikitable"
!의도
!설명
!방법
|-
|클릭되면 나타나게
|클래스를 하나 더 추가하는 방법으로 2중 클래스를 부여한다.

CSS를 만들어두고 JavaScript에서 컨트롤하는 방식을 쓴다.

해당 버튼을 클릭하면 함수에서
|CSS형태<syntaxhighlight lang="css">
.클래스명{
display: none;
}

.클래스명.on{
display: block;
}
</syntaxhighlight>JavaScript형태<syntaxhighlight lang="javascript">
const 변수 = document.querySelector('.클래스명');
const 변수2 = document.querySelector('.클래스명.on');

function 함수명(){
//변수.classList.add('on'); //해당 클래스에 on이라는 클래스를 추가한다.
//this.classList.add('on'); //위처럼 쓸 수도 있지만, 현재 클릭한 것에 적용한다는 의미의 this가 상당히 잘 쓰인다.
this.classList.toggle('on'); //위처럼 쓰고, 아래의 함수와 연계해 쓸 수도 있지만, on이 있으면 빼고, on이 없으면 더하는 기능이 있다.
}

// function 함수명2(){
// this.classList.remove('on');
// }

변수.addEventListener('click', 함수명)
//변수2.addEventListener('click', 함수명2)

</syntaxhighlight>
|}

== 스크롤 ==
<syntaxhighlight lang="javascript">
function scrollFunc(){
//console.log(pageYOffset); //스크롤을 얼마나 했는지 그 좌표를 보여준다. // 브라우저의 화면 크기에 따라 최대값이 달라진다.
let pageHeight = document.body.scrollHeight; // 최대 스크롤 가능한 좌표를 변수에 담는다.
let scrollHeight = pageYOffset + window.innerHeight; // pageYOffset은 내부 크기만큼 빠진 값이 계산된다. 때문에 내무 크기를 더한다.

if(scrollHeight >= pageHeight){
비동기통신 명령
}

}

window.addEventListener('scroll', scrollFunc);
</syntaxhighlight><br />