이벤트(event) :
웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 사건이란 UI에 발생한 클릭, 드래그, 페이지로드, 입력 값 변경 등 우리가 실제로 웹 브라우저를 사용할 때 동작하는 행위를 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행 하는데 이를 일걷어 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고도 한다.
이벤트 핸들러 (event handler) :
이벤트가 발생했을 때 그 처리를 담당하는 함수를 말한다
① click : 클릭 이벤트 onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function onclick() {
alert("클릭이벤트핸들러 작동 중 ")
}
</script>
</head>
<body>
<input type="button" value="페이지 이동" onclick="onclick()">
</body>
</html>
② load : 페이지 열리자마자 발생 onload
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function onloadhandler() {
alert("로드 핸들러 작동 중 ");
}
window.onload = onloadhandler();
</script>
</body>
</html>
③ focus : 포커스 획득 onfocus
텍스트 창은 커서를 위치시켜 입력을 가능하게 하는 행위를, 버튼은 엔터 키를 눌렀을때 클릭 효과를 나타낸다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function moveFocus(next) {
if (event.keyCode == 13) { //jquery에서 배울 내용이당. 키코드 13은 엔터를 뜻함
document.getElementById(next).focus();//입력받은 next로 focus 한다
//만약에 엔터를 눌렀다면 focus()이벤트에 의해 moveFocus(next)의 파라미터 값으로 이동한다.
//왜냐하면 그 값을 getElementById로 찾았기 때문에
}
}
function confirm() {
alert("엔터 버튼을 이용해서 커서 포커스를 움직였음")
}
</script>
</head>
<body>
<form>
[개인정보 입력]<br/>
이름 : <input id=pname type=text size=10 onkeydown=moveFocus("age")><br/>
나이 : <input id=age type=text size=10 onkeydown=moveFocus("sex")><br/>
성별 : <input id=sex type=text size=10 onkeydown=moveFocus("confirm")><br/>
<input type="button" id="확인버튼" value="confirm" onclick = "confirm()">
</form>
</body>
</html>
④ blur : 포커스를 잃었을 때 onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div><span id="order">1번째 참가자</span></div>
제시어 : <span id="word"></span>
<input type="text" value="입력하시오" onfocus="this.value=''"
onblur="this.value='입력하시오'">
<!-- 텍스트타입의 기본 값이 "입력하시오"이다 -->
<!-- 포커스를 얻으면 공란으로 초기화 하고 공란을 잃게 되면 "입력하시오"라고 나온다. -->
</body>
</html>
⑤ change : 입력값이 변경된 뒤 포커스를 잃었을 때 onchange
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function c() {
f.total.value = 1000 * f.sel.value;
//값이 바뀔 때(f.sel.value;) 원가 1000을 곱해주고
//그걸 결제금액에 넣는다
}
</script>
</head>
<body>
<form name = "f">
가격 : 1000<br/>
수량 : <select name="sel" onchange="c()">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br />
//선택을 해서 나온 숫자와 가격을 곱하면 결제금액이 측정 된다.
결제금액 : <input type="text" name="total" value="0">
</form>
</body>
</html>
⑥ mouseover : 영역에 마우스가 들어갔을 때 onmouseover / ⑦ mouseout : 영역에 마우스가 나갔을 때 onmouseout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function f1() {
let div = document.getElementById("mydiv");//dom : document objext Model
//getElementById = id 가 "mydiv" 인 애들의 값들을 변수 div 에 넣어라~
div.style.backgroundColor = 'yellow';
//div의 style 중 backgroundColor 를 노랑으로 지정해라
}
function f2() {
let div = document.getElementById("mydiv");
div.style.backgroundColor = 'purple';
}
</script>
</head>
<body>
<div id="mydiv"
style="width: 300px; height: 300px; border: 2px solid red"
onmouseover="f1()" onmouseout="f2()"></div>
</body>
</html>
⑧ keydown : 키보드를 누를 때 onkeydown
⑨ keyup : 키보드를 놓을 때 onkeyup
'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - 이미지 슬라이드 쇼 (0) | 2023.03.26 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - 회원가입 (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 페이지 이동 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - 계산기 만들기 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - value값 가져오기 (0) | 2023.03.25 |
