[jQuery]jquery 이벤트

📌jquery 이벤트란?

이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을때 실행되는 코드를 말합니다.
다양한이벤트의 종류와 이벤트를 등록하는 방법에 대해 알아보겠습니다.

✍예제1

<script type="text/javascript">
 
 $("#btn") //이벤트대상
 .click //이벤트 등록 메서드
 (function()){자바스크립트 코드;}); // 이벤트 핸들러
 
 <button class ="btn1">버튼</button>
 $(".btn1").click(function(){
	 alter("welcom");
 });
 
 $(function(){
  $(".btn1").click(function(){ //사용자가 [버튼1]을 클릭하면 
    //<P>내용</P>의 글자를 빨간색(#f00)으로 변경합니다.
	  $(".btn1").parent().next()
	  .css({"color":"#f00"});
  });
  
  $(".btn2").on({
	 "mouseover focus": function(){ //사용자가 [버튼2]에 마우스 포인터를 올리거나 
       //포커스를 이동하면 <P>내용</P>의 글자를 초록색(#0f0)으로 변경합니다.
      $(".btn2").parent().next()
	  .css({"color":"#0f0"});
      
	 },
	 "mouseout blur" : function(){
		 $(".btn2").parent().next()
		  .css({"color":"#000"});		 
	 }, 
  });
  
 //$(".btn1").click(); 단독 이벤트 등록 메서드
 //$(".btn2").trigger("mouseover"); 강제 이벤트 발생 메서드.
 //$(".btn1").off("click"); 이벤트제거 메소드
 //$(".btn2").off("mouseover focus");
 });
 
</script>

코드를 점점 간결하게만드는 과정

✍예제2

//step1
$(function(){
	$('#switcher-large').on('click',function(){
		 $('body').addclass('large');
	});
});

//step2: Large Print -> large, Narrow Column -> narrow, 
//Default -> removeClass('');

$(function(){
	$('#switcher-large').on('click',function(){
		 $('body').removeclass('narrow').addclass('large');
	});
	$('#switcher-narrow').on('click',function(){
		 $('body').removeclass('large').addclass('narrow');
	});
	$('#switcher-default').on('click',function(){
		 $('body').removeclass('large').removeclass('narrow');
	});	
});


//step3 : 클릭한 버튼만 selected 스타일이 적용되도록 하자.

$(function(){
	$('#switcher-large').on('click',function(){
		 $('body').removeclass('narrow').addclass('large');
		 $('button').removeclass('selected');
		 $(this).addclass('selected');
	});
	$('#switcher-narrow').on('click',function(){
		 $('body').removeclass('large').addclass('narrow');
		 $('button').removeclass('selected');
		 $(this).addclass('selected');
	});
	$('#switcher-default').on('click',function(){
		 $('body').removeclass('large').removeclass('narrow');
		 $('button').removeclass('selected');
		 $(this).addclass('selected');
	});	
});


//step4 :  selected 관련된 중복된 코드를 최적화 하자.

$(function(){
	$('#switcher-large').on('click',function(){
		 $('body').removeclass('narrow').addclass('large');;
	});
	$('#switcher-narrow').on('click',function(){
		 $('body').removeclass('large').addclass('narrow');		
	});
	$('#switcher-default').on('click',function(){
		 $('body').removeclass('large').removeclass('narrow');	
	});	
	
	$('switche .button').on('click',function(){
		 $('button').removeclass('selected');
		 $(this).addclass('selected');
	})
});





//step5 :  selected 관련된 중복된 코드를 좀더 최적화 하자.

$(function(){
	$('#switcher .button').on('click',function(){
		 $('button').removeclass('selected');
		 $(this).addclass('selected');
		 $('body').removeClass();
		 
		 if(this.id == "switcher-large"){
			 $('body').addclass('large');
		 }else if (this.id ="switcher-narrow"){
			 $('body').addclass('narrow');
		 }
	});	
});

//step6 : 이벤트 통합 함수  => 개별 이벤트 함수 변경  
$(function(){
	$('#switcher .button').click(function(){
		 $('button').removeclass('selected');
		 $(this).addclass('selected');
		 $('body').removeClass();
		 
		 if(this.id == "switcher-large"){
			 $('body').addclass('large');
		 }else if (this.id ="switcher-narrow"){
			 $('body').addclass('narrow');
		 }
	});	
});



//step7 : hover 이벤트 주입
$(function(){
	$('#switcher .button').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});
});

//step8 : <h3>스타일 변환기</h3> 클릭했을 때 => 버튼 3개가 화면에서 사라지게 하자.
$(function(){	
	$('#switcher h3').click(function(){
	$('#switcher .button').toggleClass('hidden');
	});
	
	$('#switcher .button').click(function(){
		$('.button').removeClass('selected');
		$(this).addClass('selected');
		$('body').removeClass();
		
		if(this.id == "switcher-large"){
			$('body').addClass('large');
		}else if(this.id = "switcher-narrow"){
			$('body').addClass('narrow');
	}		
	});		
});

//step9 : 이벤트 버블링 방지시켜 보자.
$(function(){	
	$('#switcher').click(function(){
		$('#switcher .button').toggleClass('hidden');
	});
	
	$('#switcher .button').click(function(event){
		$('.button').removeClass('selected');
		$(this).addClass('selected');
		$('body').removeClass();
		
		if(this.id == "switcher-large"){
			$('body').addClass('large');
		}else if(this.id = "switcher-narrow"){
			$('body').addClass('narrow');
		}	
		
		event.stopPropagation();
	});		
});

//step10 : on('click')으로 이벤트 발생 => off('click') 이벤트 해제
//            large, narrow 버튼을 클릭 후 버튼이 사라지는 이벤트를 해제 시켜 보자.   
$(function(){	
	$('#switcher').on('click.kosta1', function(){
		$('#switcher .button').toggleClass('hidden');
	});
	
	$('#switcher').on('click.kosta2', function(){
		alert("다른 이벤트 내용")
	});
	
	$('#switcher .button').click(function(event){
		$('.button').removeClass('selected');
		$(this).addClass('selected');
		$('body').removeClass();
		
		if(this.id == "switcher-large"){
			$('body').addClass('large');
		}else if(this.id = "switcher-narrow"){
			$('body').addClass('narrow');
		}	
		
		event.stopPropagation();
	});	
	
	$('#switcher-large, #switcher-narrow').click(function(){
		$('#switcher').off('click.kosta1');
	});
	
	//$('#switcher').trigger('click.kosta1');//이벤트를 자동으로 발생시킴
	$('#switcher').click();
});

✍예제3

$(function(){
  //스크롤바가 이동할때 마다 이벤트를 발생시키는 메소드...
	   $(window).scroll(function(){
	     var scrollHeight = $(window).height() + $(window).scrollTop();
	     var documentHeight= $(document).height();
	     
	     console.log('scrollHeight:' +scrollHeight);
	     console.log('documentHeight:' +documnetheight);
	     
	     if(Math.floor(scrollHeight)+100 >= documentHeight){
	       for(var i =0; i<10;i++){
	          $('<h1>무한스크롤</h1>').appendTo('body');
	         }
	      }
	   });
	});

	$(function(){
	  for( var i= 0; i<20; i++){
	    $('<h1> 무한스크롤</h1>').appendTo('body');
	      }
	});

✍예제4

$(function(){
   var $speech =$('div.speech');//변수화 헷갈리지않게 $붙임
   var defaultSize = parseInt($speech.css("fontSize"));
   //alert(defalutSize);
   
   $('#switcher button').click(function(){
	  var num = parseInt($speech.css("fontSize"));
	  
	  switch (this.id) {//click한 대상
	case 'switcher-large':
		num *= 1.2;
	    break;

	case 'switcher-small':
		num /= 1.2;
		break;
		
	default:
		num=defaultSize;
	    break;
	}
	   
	  
	$speech.animate({fontSize:num +'px'},'slow');  
	   
   });
  });


$(function(){
  $('div.label').click(function(){
	 var pWidth =$('div.speech p').outerWidth(); 
	 var divWidth = $('#switcher').outerWidth();
	 
	 var num = parseInt(pWidth)- parseInt(divWidth);
	 
	 $('#switcher').fadeTo('fast',0.5)
	               .animate({marginLeft:num},'slow')
	               .fadeTo('fast',1.0)
	               .slideUp('slow',function(){
	            	   $(this).css('background','green');
	               })
	               .slideDown('slow');
	  
  });
				
});


$(function(){
	//2번쨰 p테그를 화면에서 숨김
	//a테그를 클릭: slideUp+slideDown = slideToggle
	//read more => 클릭(화면에 데이터 출력) => read less
	//read less => 클릭(화면에 데이터숨김) => read more
	//text(변경할 문자열),text():텍스트값을 뽑아오는 작업.
	
 $('div.speech p').eq(1).hide();
 
 
 $('a.more').click(function(){
	 $('div.speech p').eq(1).slideToggle('slow');
	 
	 var $link = $(this);
	 if($link.text()== 'read more'){
		$link.text('read less'); 
	 }else{
		 link.text('read more');
	 }
  });
 
});