개발자의 길/jQuery

jQuery 이벤트(event) 01

모쿠 2017. 4. 10. 14:53

<jQuery의 이벤트 함수>


<03_event.html>


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
</head>
<body>
 
<h1>jQuery Event</h1>
<img id="bulb" alt="전구" src="images/bulb_off.gif" />
<br/><br/>
<p style="border: 1px solid black; background-color: green">hover</p>
<input type="text" id="userid" />
 
 
<!-- jQuery CDN 포함: 라이브러리 포함 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
// $(document).ready(function() {});
$(function() {
    // mouseover, mouseenter:
    // 마우스가 해당 영역 위로 올라갔을 때 
    $('#bulb').mouseover(function() {
        console.log($(this).attr('src'));
        $(this).attr('src', 'images/bulb_on.gif');
    });
    
    // mouseout, mouseleave:
    // 마우스가 해당 영역 바깥으로 나갔을 때
    $('#bulb').mouseout(function() {
        $(this).attr('src', 'images/bulb_off.gif');
    });
    
    // hover(handlerIn, handlerOut)
    //   handlerIn: 마우스가 해당 영역 위로 올라갔을 때 처리할 이벤트 핸들러
    //   handlerOut: 마우스가 해당 영역 바깥으로 나갔을 때 처리할 이벤트 핸들러
    function handlerIn() {
        console.log($('p').css('background-color'));
        $('p').css('background-color', 'yellow');
    }
    function handlerOut() {
        $('p').css('background-color', 'green');
    }
    $('p').hover(handlerIn, handlerOut);
    
    // focus: 포커스를 받았을 때(입력 가능한 상태)
    // blur: 포커스를 잃었을 때
    $('#userid').focus(function() {
        $(this).css('background-color', 'lightyellow');
    });
    
    $('#userid').blur(function() {
        $(this).css('background-color', 'white');
    });
    
    // change: 입력 내용이 변경됐을 때
    $('#userid').change(function() {
        console.log($(this).val());
        // document.getElementById('userid').value
        
        $(this).val($(this).val().toUpperCase());
    });
    
});
</script>
 
</body>
</html>
cs



<출력화면>


- 기능 실행전



- 기능 실행후



저작자표시 비영리