Frontend/JavaScript
17. JavaScript 이벤트(Event)
개발개발빈이
2022. 5. 10. 20:04
○ 이벤트 (Event)
- 이벤트 : 웹사이트 방문자가 하는 행위
- 자바스크립트는 주로 이벤트를 발생시킨 후 함수를 호출함으로써 실행한다
- 기본 이벤트의 종류
① onchange : 다른 객체로 바뀌었을 때
② onclick : 클릭했을 때
③ onmouseover : 마우스가 올려졌을 때
④ onmouseout : 마우스가 올라갔다 나갔을 때
⑤ onkeydown : 키보드를 눌렀을 때
⑥ onload : 페이지 로딩이 끝났을 때
⑦ onsubmit : 서버로 해당 폼이 전송될 때
○ 마우스 관련 이벤트
- onclick, onmouseover, onmouseout
<!--버튼을 누르면 경고창 띄우기-->
<input type="button" value="버튼1" onclick="alert('버튼1클릭')">
<!--버튼을 누르면 해당URL로 이동-->
<input type="button" value="티스토리" onclick="location.href='https://www.tistory.com'">
<!--버튼에 마우스를 올리고, 내릴 때 경고창 띄우기-->
<input type="button" value="마우스" onmouseover="alert('마우스over')" onmouseout="alert('마우스out')">
○ onkeydown
<!--키보드를 누르면 경고창 띄우기-->
<input type="text" onkeydown="alert('키보드 누름')">
<textarea rows="5" cols="10" onkeydown="alert('키보드 누름')"></textarea>
○ onchange
<!--목록에서 다른 것을 선택하면 경고창 띄우기-->
<select onchange="alert('다른목록변경')">
<option>서울</option>
<option selected>제주</option>
<option>부산</option>
</select>
○ onload
<!--body가 로딩되면 경고창 띄우기-->
<body onload="alert('어서오세요')">
</body>
○ 커서 관련 이벤트
- onfucus : 텍스트 입력 상자에 커서가 들어왔을 때
- onblur : 텍스트 입력 상자에서 커서가 나갔을 때
<!--텍스트에 커서가 들어오거나 나갈 때 경고창 띄우기-->
<input type="text" onfocus="alert('커서들어옴')" onblur="alert('커서나감')">
○ 서버로 해당 폼이 전송될 때 이벤트
- onsubmit : return값이 true이면 해당폼이 전송되고, return값이 false이면 해당폼이 전송되지 않는다
- 폼을 서버로 전송하는 컨트롤 요소들 : <input type="submit">, <input type="image">, <button>
<form name="myForm" id="myForm" method="get" action="ok.jsp" onsubmit="return true">
<input type="submit" value="전송1">
<button>전송2</button>
<input type="image" src="../image/search_blue.png">
</form>
● PRACTICE 연습문제
Q) 마우스 이벤트를 이용해서 이름 부분에 마우스를 올리면 이미지가 바뀌도록 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마우스 이벤트 연습문제</title>
<style>
#imgtable{
border: 3px solid black;
font-size: 15px;
vertical-align: middle;
}
#imgtable th{
border: 2px solid black;
width: 150px;
}
</style>
</head>
<body>
<h3>마우스 이벤트</h3>
<table id="imgtable">
<tr>
<th onmouseover="show('r'); style.backgroundColor='lightpink'"
onmouseout="style.backgroundColor='white'">라이언</th>
<th onmouseover="show('n'); style.backgroundColor='lightskyblue'"
onmouseout="style.backgroundColor='white'">네오</th>
<th onmouseover="show('j'); style.backgroundColor='lightgreen'"
onmouseout="style.backgroundColor='white'">제이지</th>
</tr>
<tr>
<th colspan="3">
<div id="ryan" style="display: block;">
<img src="../image/k7.png">
</div>
<div id="neo" style="display: none;">
<img src="../image/k5.png">
</div>
<div id="jayg" style="display: none;">
<img src="../image/k3.png">
</div>
</th>
</tr>
</table>
<script>
function show(kind){
switch(kind){
case "r": document.getElementById("ryan").style.display="block";
document.getElementById("neo").style.display="none";
document.getElementById("jayg").style.display="none";
break;
case "n": document.getElementById("ryan").style.display="none";
document.getElementById("neo").style.display="block";
document.getElementById("jayg").style.display="none";
break;
case "j": document.getElementById("ryan").style.display="none";
document.getElementById("neo").style.display="none";
document.getElementById("jayg").style.display="block";
break;
}//switch end
}//show() end
</script>
</body>
</html>