[jQury] 2. 이벤트 - (예제16장) .on mouseenter/mouseleave(.hover) .click .off canvas .trigger (.click()) .stopPropagation() .mouseover() . mouseenter()

             

          // this.innerHTML += '+';

          // addEventListener('click',function(){}; -> ie 8 이하에서는 동작 안함

        $(document).ready( function () {

            // 이벤트를 연결합니다. (.on)

            $( 'h1').on( 'click', function () {

                $( this).html(function (index, html) {

                    return html + '+' ;

                });

            });

        });

    <h1 >Header-0 </h1 >

    <h1 >Header-1 </h1 >

    <h1 >Header-2 </h1 >

        $(document).ready( function () {

            // 이벤트를 연결합니다. 1 bad

            $( 'h1').on( 'click', function () {

                $( this).html(function (index, html) {

                    return html + '+' ;

                });

            });

            // 이벤트를 연결합니다. 2 good

            $( 'h1').on({

                mouseenter: function () { $(this ).addClass('reverse'); },

                mouseleave: function () { $(this).removeClass('reverse' ); }

            });

        });

    <h1 >Header-0 </h1 >

    <h1 >Header-1 </h1 >

    <h1 >Header-2 </h1 >

        .reverse { background: black; color: white; }

             // 이벤트를 연결합니다.

            $( 'h1').on( 'click', function () {

                $( this).html(function (index, html) {

                    return html + '+' ;

                });

            });

            // 마우스 이벤트를 연결합니다.

            $( 'h1').on({

                mouseenter: function () { $(this ).addClass('reverse'); },

                mouseleave: function () { $(this).removeClass('reverse' ); }

            });

    <h1 >Header-0 </h1 >

    <h1 >Header-1 </h1 >

    <h1 >Header-2 </h1 >

        .reverse { background: black; color: white; }

        $(document).ready( function () {

            // 이벤트를 연결합니다.

            $( 'h1').hover( function () {

                $( this).addClass('reverse' );

            }, function () {

                $( this).removeClass('reverse' );

            });

        });

    <h1 >Header-0 </h1 >

    <h1 >Header-1 </h1 >

    <h1 >Header-2 </h1 >

        $(document).ready( function () {

            // 이벤트를 연결합니다.

            $( 'h1').click( function () {

                // 출력합니다.

                $( this).html('CLICK' );

                alert( '이벤트가 발생했습니다.' );

                // 이벤트를 제거합니다.

                $( this).off();

            });

        });

    <h1 >Header-0 </h1 >

    <h1 >Header-1 </h1 >

    <h1 >Header-2 </h1 >

         * { margin: 0px; padding: 0px }

        div {

            margin: 5px; padding: 3px;

            border: 3px solid black;

            border-radius: 10px ;  }

        $(document).ready( function () {

            // 이벤트를 연결합니다.

            $( 'div').click( function () {

                // 변수를 선언합니다. 

          // $( 'h1', this ).text();  두번째 자리 this는 클릭한 ('div')를 지정해주는 것이다 h1의 부모

                var header = $( 'h1', this).text();

                var paragraph = $( 'p', this).text();

             //    var header = $( this).find('h1' ).text();

             //   var paragraph = $( this).find('p' ).text();

                // 출력합니다.

                alert(header + '\n' + paragraph);

            });

        });

    <div >

        <h1 >Header 1 </h1 >

        <p >Paragraph </p >

    </div >

    <div >

        <h1 >Header 2 </h1 >

        <p >Paragraph </p >

    </div >

    <div >

        <h1 >Header 3 </h1 >

        <p >Paragraph </p >

    </div >

             // 변수를 선언합니다.

            var canvas = document.getElementById( 'canvas');

            var context = canvas.getContext( '2d');

            // 이벤트를 연결합니다.

            $(canvas).on({

                mousedown: function (event) {

                    // 위치를 얻어냅니다.

                    var position = $( this).offset();

                    var x = event.pageX - position.left;

                    var y = event.pageY - position.top;

                    // 선을 그립니다.

                    context.beginPath();

                    context.moveTo(x, y);

                },

                mouseup: function (event) {

                    // 위치를 얻어냅니다.

                    var position = $( this).offset();

                    var x = event.pageX - position.left;

                    var y = event.pageY - position.top;

                    // 선을 그립니다.

                    context.lineTo(x, y);

                    context.stroke();

                }

            });

        });

    <canvas id ="canvas" width ="700" height ="400" style ="border : 3px solid black">

    </canvas >

        $(document).ready( function () {

            // 이벤트를 연결합니다.

            $( 'h1').click( function () {

                $( this).html(function (index, html) {

                    return html + '★' ;

                });

            });

            // 1초마다 함수를 실행합니다.  dispatchEvent와 동일

            setInterval( function () {

                $( 'h1').last().trigger( 'click');

                // $('h1').last().click();

            }, 1000);

        });

    <h1 >Start: </h1 >

    <h1 >Start: </h1 >

        $(document).ready( function () {

            // 이벤트를 연결합니다.

            $( 'h1').click( function (event, data1, data2) { //배열 갯수 만큼 파라미터로 넘어온다

                alert(data1 + ' : ' + data2);

            });

            // 이벤트를 강제로 발생시킵니다. 반듯이 배열에 담아서 전달해야한다.

            $('h1').eq(1).trigger( 'click', [273, 52]);

        });

    <h1 >Start: </h1 >

    <h1 >Start: </h1 >

        $(document).ready( function () {

            $( 'a').click( function (event) {

                $( this).css('background-color' , 'blue' );

                event.stopPropagation();

                event.preventDefault();

            });

            $( 'h1').click( function () {

                $( this).css('background-color' , 'red' );

            });

        });

    <h1 >

        <a href ="http://hanb.co.kr" >Hanb Media </a >

    </h1 >

        $(document).ready( function () {

            $( 'h1').on( 'click', function () {

                var length = $( 'h1').length;

                var targetHTML = $( this).html();

                $( '#wrap').append( '<h1>' + length + ' - ' + targetHTML + '</h1>');

            });

        });

    <div id ="wrap" >

        <h1 >Header </h1 >

    </div >

예제 16-31 공부하기

.mouseover() 

.mouseenter()

        $(document).ready( function (event) {

            $( 'textarea').keyup( function () {

                // 남은 글자 수를 구합니다.

                var inputLength = $( this).val().length;

                var remain = 150 - inputLength;

                // 문서 객체에 입력합니다.

                $( 'h1').html(remain);

            });

        });

    <div >

        <p >지금 내 생각을 </p >

        <h1 >150 </h1 >

        <textarea cols ="70" rows= "5"></textarea >

    </div >

        $(document).ready( function (event) {

            $( 'textarea').keyup( function () {

                // 남은 글자 수를 구합니다.

                var inputLength = $( this).val().length;

                var remain = 150 - inputLength;

                // 문서 객체에 입력합니다.

                $( 'h1').html(remain);

                // 문서 객체의 색상을 변경합니다.

                if (remain >= 0) {

                    $( 'h1').css( 'color', 'black');

                } else {

                    $( 'h1').css( 'color', 'red');

                }

            });

        });

    <div >

        <p >지금 내 생각을 </p >

        <h1 >150 </h1 >

        <textarea cols ="70" rows= "5"></textarea >

    </div >

******** 21장