this를 사용한 이벤트

728x90

728x170

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!-- this를 사용한 이벤트 발생 예제1 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title>이벤트</title>
<script type="text/javascript">
    function chColor(obj, state){
        var myColor;
        if(state=="over"){
            myColor="red";
        }
        else {
            myColor="black";
        }
        obj.style.color=myColor;
    }
    // <button>에 마우스를 올릴 경우엔 글자 색상이 빨간색으로 바뀌고, 
    // 마우스가 벗어났을 경우엔 글자 색상이 다시 검은색으로 변함.
</script>
</head>
<body>
    <button onmouseover="chColor(this,'over')" onmouseout="chColor(this,'out')">마우스 아웃</button>
</body>
</html>
 
<!-- this를 사용한 이벤트 발생 예제2 -->
<script type="text/javascript">
    function submit_chk(myForm){
        var reg1=/^[가-힣]{2,5}$/;
        var reg2=/^(010|016|011)\d{3,4}\d{4}$/;
 
        var name=myForm.user_name;
        var tel=myForm.user_tel;
 
        var result1=reg1.test(name,value);
        var result2=reg1.test(tel,value);
 
        if(!result1){
            alert("이름 입력이 잘못되었습니다.");
            name.value="";
            name.focus();
            return false;
        }
        else if(!result2){
            alert("연락처 입력이 잘못되었습니다.");
            tel.value="";
            tel.focus();
            return false;
        }
    }
 
    function reset_chk(myForm){
        var result=confirm("정말로 회원가입을 취소하시겠습니까?");
        if(result) {
            return false;
        }
    }
</script>
</head>
<body onload="document.f1.user_name.focus();">
<form action="#" method="post" name="f1" onsubmit="return submit_chk(this);" onreset="return reset_chk(this);">
    <fieldset>
        <legend>회원가입</legend>
        <p>
            <label for="user_name">이름</label>
            <input type="text" name="user_name" id="user_name" />
        </p>
        <p>
            <label for="user_tel">연락처</label>
            <input type="text" name="user_tel" id="user_tel" />
        </p>
        <p>
            <input type="submit" value="회원가입" />
            <input type="reset" value="가입취소" />
        </p>
    </fieldset>
</form>
</body>
</html>
Colored by Color Scripter

cs

소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'Source Code > JavaScript' 카테고리의 다른 글

[JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현) (0)	2022.04.27
[JavaScript] Scroll Indicator 구현하기 (0)	2022.04.12
Checkbox, Radio, Select에서 선택된 항목 출력하기 (0)	2020.11.05
이벤트 객체 (Event Object) (0)	2017.05.21
이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0)	2017.05.21
이벤트 (Event) (0)	2017.05.21
함수를 사용하여 사진 갤러리 만들기 (0)	2017.05.21
함수 (Function) (1)	2017.05.21