'JavaScript' 카테고리의 다른 글
| 배열 (0) | 2019.03.04 |
|---|---|
| 폼태그 및 접근법 (0) | 2019.03.04 |
| 태그 속성 접근 (0) | 2019.03.04 |
| this와 var의 차이점 (0) | 2019.03.04 |
| 함수 선언방법 (0) | 2019.03.04 |
JavaScript
이벤트 처리
# 이벤트처리
1.첫번째방식!
<태그명 onclick="함수명()">
<script>
function 함수명(){
//이벤트처리
}
</script>
2.두번째방식( 함수를 직접 등록 )
<script>
window.onload=function(){
태그주소.onclick=function(){
//이벤트처리
}
}
</script>
2-1.두번째방식( 함수를 이름으로만 등록 )
<script>
window.onload=function(){
태그주소.onclick = m; // 함수명만 등록
}
function m(){
}
</script>
[ex]
<html>
<head>
<script>
window.onload=function(){
function aaa(){ //무명함수로해도됨 var aaa=function(){
this.style.backgroundColor=this.value;
}
b1.onclick=aaa; //만약 aaa(); 하면 오류!! 온로드하면서 바로실행
b2.onclick=aaa; //이렇게쓰면 버튼을 누르면 aaa라는 함수이름을 등록!!!(외우기!)
b3.onclick=aaa;
b1.onclick = function(){ // 위 b1의 온클릭함수가 마지막인 이거로 등록됨
// 위 aaa가 안되고..
alert(2233);
}
}
</script>
</head>
<body>
<input type="button" id="b1" value="red">
<input type="button" id="b2" value="green">
<input type="button" id="b3" value="blue">
</body>
</html>
# 이벤트 종류
2. focus() : 마우스커서
[ex]
<head>
<script>
window.onload=function(){
//document.forms[0].elements[1].focus();
document.getElementById("t").focus();
}
</script>
</head>
<body>
<form>
<input type="text">
<input type="text" id="t">
<input type="text">
</form>
</body>
2. onkeyup // onkeyup은 누르고때면 다음함수를 호출!
[ex] 주민번호입력포커스 자동 이동
<head>
<script>
window.onload=function(){
}
function m(t1){
var t2=document.getElementById("txt");
if(t1.value.length==6)
t2.focus();
}
</script>
</head>
<body>
주민번호
<input type="text" onkeyup="m(this)">
-<input type="text" id="txt">
</body>