jQuery 이벤트

모덴웹을 위한 Javascript, JQuery입문 [윤인성 지음] 참고

2017 - 11 - 07 (화)

키보드 이벤트

윈도우 이벤트

입력양식 이벤트

키보드 이벤트

이벤트 이름	설명
keydown	키보드를 누를 때 발생
keypress	글자가 입력될 때 발생
keyup	키보드를 뗄 때 발생

// keyup 을 사용하는 이유는 keypress는 영어만 지원한다.

        $(document).ready(function(){
            $('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');
                }
            })
        })

윈도우 이벤트

scroll 이벤트 : 스크롤 될 때 이벤트 발생

$(document).ready(function(){
           $(window).scroll(function(){
//                alert('a')
               var scrollHeight = $(window).scrollTop() + $(window).height();
               var documentHeight = $(window).height();
               if(scrollHeight == documentHeight -200){
                   for(var i =0; i <10 ; i++){
                       $('<h1>Infinity Scroll</h1>').appendTo('body');
                   }
               }
           })
       })

입력양식 이벤트

이벤트 이름	설명
change	입력 양식의 내용을 변경할 때 발생
focus	입력양식에 초점을 맞추면 발생
focusout	입력양식에 초점이 사라지기 바로전에 발생
select	입력양식을 선택할 때 발생한다.
submit	submit 버튼을 눌렀을 때
reset	reset 버튼을 눌렀을 떄

submit 이벤트

// submit 버튼을 눌렀을 때 name 과 password 알림 // 한번 알림 후 이벤트 제거
$(document).ready(function(){
     $('form').submit(function(event){
         var name = $('#name').val();
         var password = $('#password').val();
         alert(name + ' : '+ password);

         event.preventDefault();
     })
 })