2024.08.14. JS - event

[ 대표적인 이벤트 종류 ]

1) click : 마우스 클릭, dblclick : 마우스 더블클릭
2) mouseover : 마우스가 대상 위에 위치(= mouseenter 유사)
    mouseout : 마우스가 대상에서 빠져나감(= mouseleave 유사)
3) focus : 대상이 선택됨(= 포커스가 위치함),<-> blur : 대상 선택이 해제됨(= 포커스 잃음)
4) change : 대상 선택이 해제될 때(포커스 잃음) 대상 요소의 값(value 속성값)이 변경됨
5) load : 대상 요소가 로딩 완료됨, onload : 대상 요소 로딩 해제됨
6) keydown : 키보드의 키 누름, keyup : 키보드의 키 뗌, keypress : 키보드의 키 누름
7) submit : 폼 데이터 전송(submit 버튼 클릭 등), reset : 폼 데이터 초기화

<!-- 	1.jpg 이미지표시(가로:150 세로 150 픽셀) 후 
		마우스 오버시 "2.jpg" 이미지 표시, 
		마우스 아웃 시 "3.jpg" 이미지 표시 -->
<img src="images/1.jpg" width="150" height="150" id="img1"
     onmouseover="document.querySelector('#img1').src='images/2.jpg'"
     onmouseout="document.querySelector('#img1').src='images/3.jpg'">
<!-- 이미지 복원버튼 클릭시 id 선택사 img1 요소의 이미지를 1.jpg로 변경(되돌리기) -->
<input type="button" value="이미지복원" onclick="changeImage()">

<script>
function changeImage(){
	document.querySelector("#img1").src = "images/1.jpg";
}
</script>

<!-- 	changeImage2() 함수 호출 시 전달인자로 this 지정하면 현재 태그 요소를 객체로 전달함. 
		여튼 현재 태그에서 무엇을 보내려면 this를 사용한다. -->
<img src="images/2.jpg" width="150" height="100" onclick="changeImage2(this)">

<script>
function changeImage2(element){
	// img 태그 클릭시 changeImage2 함수 호출할때 this를 전달인자로 지정하면 img 태그요소 자체가 객체로 전달됨 
	element.src = "images/3.jpg"; 
	//	=> 파라미터로 element 전달받으면 document.querySelector() 생략가능 
}
</script>

<!-- event 함수를 파라미터로 보내면 객체가 전달된다.  -->
<img src="images/3.jpg" width="150" height="100"  onclick="changeImage3(event)">

<script>
function changeImage3(event){
	// img 태그 클릭시 changeImage2 함수 호출할때 event 를 전달인자로 지정하면 
	// img 태그요소에서 발생한 이벤트를 관리하는 객.체.가 전달됨. 
	//	=> 파라미터로 전달받아 객체명.target.속성명으로 속성값 변경가능.
	console.log(event);
	
	// event.src = "../images/1.jpg" 이렇게하면 바뀌지 않고 target을 넣어야함.
	event.target.src = "images/1.jpg"
}
</script>

 

<!-- 	id="text1" 입력창에 포커스 위치(focus 이벤트)시 changeColor1()함수호출 -->
<!-- 	id="text1" 입력창에 포커스 해제(blur 이벤트)시 changeColor2()함수호출 -->
텍스트1 : <input type="text" id="text1" onfocus="changeColor1()" onblur="changeColor2()">
<br>
<!-- 	텍스트1 입력창에 포커스 위치(focus 이벤트)시 changeColor3()함수호출 -->
<!-- 	텍스트1 입력창에 포커스 해제(blur 이벤트)시 changeColor4()함수호출 -->
<!-- 	두 함수 모두 호출 시 전달인자로 this 전달 -->
텍스트2 : <input type="text" id="text2" onfocus="changeColor3(this)" onblur="changeColor4(this)">
<input type="button" value="확인" onclick="checkText2()">


<!-- 	마우스를 뗀 상태 -->
<!-- keyup 이벤트 - checkId1() 함수 호출 -->
텍스트3(key up): <input type="text" id="id1" onkeyup = "checkId1()">
<span id="result1"></span>
<br>
<!-- blur 이벤트 동작시호출(텍스트박스에 커서 위치 상태에서 커서가 다른 곳으로 빠져나가면 동작) -->
텍스트4(blur): <input type="text" id="id2" onblur = "checkId2(this)" placeholder="">
<span id="result2"></span>
<br>
<!-- change 이벤트 - checkId3() 함수 호출 -->
<!-- 전달인자로 this.value 지정시 현재 태그요소의 value  속성값(입력된 텍스트) 객체로전달 -->
<!--  change 이벤트 동작시호출 -->
<!-- 	 =>텍스트박스에 커서 위치 상태에서 커서가 다른 곳으로 빠져나가갈 때 (blur이벤트와 동일) -->
<!-- 	  ** 입력된 내용이 커서가 위치하는 시점의 내용과 달라졌을 때 동작 ** (blur이벤트와 차이점) -->
<!-- 	내용의 변화가 중요할때 사용. -->
텍스트5(change): <input type="text" id="id3" onchange="checkId3(this.value)">
<span id="result3"></span>

<script>
function changeColor1(){
	// id 선택자 "text1" 요소의 배경색 "SKYBLUE"로 변경
	/* 지금 입력중인 창을 강조할때 쓰임. 포커스는 클릭과 관계없다(탭키로 이동해도 포커스가 옴.) */
	document.querySelector("#text1").style.background = "skyblue";
}
function changeColor2(){
	// id 선택자 "text1" 요소의 배경색 널스트링("") 변경(처음상태로)
	document.querySelector("#text1").style.ground = "";
}

// ---------------------
function changeColor3(element){
	// id 선택자 "text2" 요소의 배경색 "LIME"으로 변경
	element.style.background = "lime"
}
function changeColor4(element){
	// id 선택자 "text2" 요소의 배경색 널스트링("") 변경(처음상태로)
	element.style.background="";
}
</script>