mouseover-mouseout

• 자식 요소에 접근 시에도 이벤트 핸들링 함

mouseenter-mouseleave

• 자식 요소에 접근 시에는 이벤트 핸들링 하지 않음

<div class="outer">
        <div class="inner"></div>
    </div>
    <script>
        $(function(){ 
             $('.outer').mouseover(function(){
                 console.log("OVER!");
             });
             $('.outer').mouseout(function(){
                 console.log("OUT!");
             });
/* ------------------------------------------------*/
            $('.outer').mouseenter(function(){
                console.log("ENTER!");
            });
            $('.outer').mouseleave(function(){
                console.log("LEAVE!");
            });
        });
    </script>

hover( ) 메소드

• mouseenter와 mouseleave를 동시에 사용하는 효과

<h1 id="test1">hover 테스트</h1>
    <script>
        $(function(){
            $("#test1").hover(function(){
                $(this).toggleClass("reverse");
                console.log("enter");
            }, function(){
                $(this).toggleClass("reverse");
                console.log("leave");
            });
        });
    </script>

키보드 이벤트

keydown→ 키보드가 눌려질 때

keypress→ 글자가 입력될 때, 펑션키(fn키), 다양한 기능키에는 사용 못함

keyup→ 키보드가 떼어질 때, Tab키는 사용 못함

<input type="text" id="test">
    <script>
        $(function(){
            $("#test").keydown(function(e){
                console.log("keydown: " + e.key);
            });
            $("#test").keypress(function(e){
                console.log("keypress: " + e.key);
            });
            $("#test").keyup(function(e){
                console.log("keyup: " + e.key);
            });
        });
    </script>

< 글자수 세기>

<h4>동적으로 글자수 세기</h4>
    <div>
        <p><span id="counter">0</span>/150</p>
        <textarea cols="70" rows="5"></textarea>
    </div>
    <script>
       $(function(){
           $('textarea').keyup(function(){

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

                $("#counter").text(inputLength);

                var remain = 150 - inputLength;

                if(remain >= 0){
                    $("#counter").parent().css("color", "black");
                } else{
                    $("#counter").parent().css("color", "red");
                }
           });
       });
    </script>