글

Mouse event

JS 2014. 5. 21. 14:21


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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'></script>
        <style>
            .outer{
                width: 200px;
                height: 200px;
                background: orange;
                padding: 50px;
                margin: 10px;
}
            
            .inner{
                width:100%;
                height:100%;
                background: red;
}
        </style>
        <script>
            $(document).ready(function() {
                $('.outer').mouseover(function() {
                    $('body').append('<h1>MOUSEOVER</h1>');
                }).mouseenter(function(){
                    $('body').append('<h1>MOUSERENTER</h1>');
                });
                            
            });
        </script>
    </head>
    <body>
        <div class='outer'>
            <div class='inner'>
                
            </div>
        </div>
        
    </body>
</html>


저작자표시

설정

,

트랙백

댓글

글

기본 이벤트 제거와 이벤트 전달 제거

JS 2014. 5. 17. 22:24


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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'> </script>
        <style>
            *{
                margin: 5px; padding: 5px;
                border: 3px solid black;
            }
        </style>
        <script>
            $(document).ready(function() {
                $('a').click(function(event){
                    $(this).css('backgroundColor', 'blue');
                    //event.stopPropagation();
                    //event.preventDefault();
                    return false;
                });
                
                $('h1').click(function(){
                    $(this).css('backgroundColor', 'red');
                });
            });
        </script>
    </head>
    <body>
        <h1>
            <a href='http://hanb.co.kr'> Hanb Media</a>
            
        </h1>
    </body>
</html>


저작자표시

설정

,

트랙백

댓글

글

trigger

JS 2014. 5. 17. 22:03

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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'> </script>
        <style>
            * {margin: 0px; padding: 0px}
            div{
                margin: 5px; padding: 3px;
                border: 3px solid black;
                border-radius: 10px;
            }
        </style>
        <script>
            $(document).ready(function() {
            //    
                $('h1').click(function(event, val1, val2) {
                    if(    isNaN(val1) == true ){
                        $(this).html(function(index,html){
                            return html + '+';
                        });
                        
                    }else{
                        $(this).html(function(index,html){
                                return html + val1 + ':' +val2;
                        });
                    }
                });
                    
                        $('h1').eq(1).trigger('click', [100,200] );
                
            //    
            });
        </script>
    </head>
    <body>
        <h1>Start: </h1>
        <h1>Start: </h1>
    </body>
</html>


저작자표시

설정

,

트랙백

댓글

1 ··· 3 4 5 6 7 8 9 ··· 59
지역로그| 태그| 방명록| 관리자| 쓰기
워라's Blog is powered by Daum & Tattertools / Designed by Tistory

티스토리툴바