이벤트 (Event)

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

<!-- 이벤트 예제1 -->
<script type="text/javascript">
    var color=["white","yellow","aqua","purple"];
    var i=0;
    function colorBg(){
        i++;
        if(i>=color.length) i=0;
        var bodyTag=document.getElementByTagName("body")[0];
        bodyTag.style.backgroundColor=color[i];
    }
    window.onload=function(){
        var btn2=document.getElementById("btn2");
        btn2.onclick=function(){ colorBg(); }
 
        var btn3=document.getElementById("btn3");
        btn3.onmouseover=function(){ colorBg(); }
    }
</script>
</head>
<body>
    <p>
        <button onclick="colorBg();">버튼1</button>
    </p>
    <p><button id="btn2">버튼2</button></p>
    <p>
        <button onmouseover="colorBg();">버튼3</button>
    </p>
    <p><button id="btn3">버튼3</button></p>
</body>
</html>
 
 
<!-- 이벤트 예제2 -->
<script type="text/javascript">
    var color=["white","yellow","aqua","purple"];
    var i=0;
    function colorBg(){
        i++;
        if(i>=color.length) i=0;
        var bodyTag=document.getElementByTagName("body")[0];
        bodyTag.style.backgroundColor=color[i];
    }
    window.onload=function(){
        var btn2=document.getElementById("btn2");
        btn2.onclick=function(){ colorBg(); }
 
        // 마우스가 없을 경우 Tab 키를 사용해 이용할 수 있도록 키보드 대응 이벤트 onfocus 추가
        var btn3=document.getElementById("btn3");
        btn3.onmouseover=btn3.onfocus=function(){ colorBg(); }
    }
</script>
</head>
<body>
    <p>
        <button onclick="colorBg();">버튼1</button>
    </p>
    <p><button id="btn2">버튼2</button></p>
    <p><button id="btn3">버튼3</button></p>
    <p>
        <button onmouseover="colorBg();" onfocus="colorBg();">버튼4</button>   <!-- onfocus 추가 -->
    </p>
</body>
</html>
</script>
Colored by Color Scripter

cs

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

728x90

그리드형(광고전용)

저작자표시

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

Checkbox, Radio, Select에서 선택된 항목 출력하기 (0)	2020.11.05
이벤트 객체 (Event Object) (0)	2017.05.21
this를 사용한 이벤트 (0)	2017.05.21
이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0)	2017.05.21
함수를 사용하여 사진 갤러리 만들기 (0)	2017.05.21
함수 (Function) (1)	2017.05.21
문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기 (0)	2017.05.21
폼 요소 선택자 (0)	2017.05.21