반응형
이벤트
UI에 발생한 사건이다.
클릭, 드래그, 페이지 로드, 입력값 변경 등이 있다.
이벤트 핸들러
이벤트가 발생했을 때 자동으로 호출되는 함수이다.
핸들러 등록 속성
on이벤트명
이벤트 처리
click :
클릭 시 발생하는 이벤트이다. onclick
<input type = "button" value="b1" onclick = "함수명('aaa')"><script type = "text/javascript">
function b(){
alert(f.btn1.value); //form f의 btn1의 value 를 출력(껍데기)
}
function c(){
alert("function c");
}
function d(){
alert("function d");
}
</script>
<body>
<form name = "f">
<input type = "button" name="btn1" value = "btn1" onclick="b()">
<input type = "button" value = "btn2" onclick="c()">
<input type = "button" value = "btn3" onclick="d()"><br/>
</form>
</body>
load :
페이지 열리자마자 발생하는 이벤트이다. onload
window.onload = 함수명;// 코드 결합
function 함수명(){
}
//onload 속성에 함수 등록
window.onload=함수명;
=> window의 onload 속성으로 핸들러 등록.// 위 두개 코드 결합하면.
// 해당 함수는 onload 이외에 다시 사용할 일이 없어서 결합하여 한 번 사용하는 익명의 함수를 생성.
// 익명함수. 이름이 없는 함수, 이벤트 핸들러에 바로 등록할때 주로 사용
window.onload=function(){
실행문;
}
focus :
포커스 획득. onfocus
blur :
포커스 잃었을 때 . onblur
<head>
<script type="text/javascript">
function a(tt, str) {
console.log(str + "요소가 포커스 얻음");
//console.log : 개발할 때 디버깅 용으로 하는 것
tt.value = "hello" + str;
//tt : focus를 얻은 요소를 this 로 받아온 것
}
function b(tt) {
tt.value = "포커스 빼앗겼음";
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="t2" onfocus="a(this, 't2')" onblur="b(this)">
<input type="text" name="t2" onfocus="a(this, 't2')" onblur="b(this)">
</body>
change :
입력값이 변경된 뒤 포커스 잃었을 때 발생. onchange
<head>
<script type="text/javascript">
function c() {
f.total.value = 1000 * f.sel.value;
//total의 값 = 1000*sel 값
}
</script>
</head>
<body>
가격: 1000<br />
수량 : <select name="sel" onchange="c()">
//선택항목 이름 : sel
//sel 값에는 각 value 를 넣어준다.
<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"> <br />
</body>
mouseover:
영역에 마우스가 들어갔을 때. onmouseover
mouseout:
영역에 마우스가 나왔을 때. onmouseout
<head>
<script type="text/javascript">
function f1(){
let div = document.getElementById("mydiv");
//id값이 "mydiv"인 것들을 받아와 변수 div에 넣어준다
div.style.backgroundColor = 'yellow'; //이 div의 css의 backgroundcolor
}
function f2(){
let div = document.getElementById("mydiv");
div.style.backgroundColor = 'green';
}
</script>
</head>
<body>
<div id="mydiv" style="width: 150px; height: 150px; border: 2px solid red"
onmouseover=f1() onmouseout=f2()></div>
</body>
keydown:
키보드 누를 때 . onkeydown
keyup :
키보드 눌렀다 땠을 때. onkeyup
<head>
<script type="text/javascript">
function f3(){
let len = 10-f.keytest.value.length;
//최대 글자가 10이니 10에서 문자열의 길이 (length) 빼기. 폼 f의 keytest.value 의 길이
let div = document.getElementById("ddd");
//id 의 이름이 ddd인 요소를
alert(div.innerHTML);
div.innerHTML = len;
//innerHTML : 태그 열고 닫기
}
</script>
</head>
<body>
<form name="f">
10글자 까지만 입력
<div id="ddd">
<b>10</b>
</div>
<input type="text" name="keytest" onkeyup="f3()">
</form>
</body>
반응형
