jQuery 합성이벤트 toggle() hover()

jQuery 합성이벤트 toggle() hover()

보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 이벤트이다. 이에 대표적인 메소드가 toggle() ,hover()이다.

toggle()

toggle()은 클릭에따른 메소드이다. 한번클릭할때 그리고 다시클릭할때 이벤트를 보여준다.인자로 두개의 함수를 가진다.

$().toggle(function(A) {} , function(B) {});

한번클릭하면function(A)가 발생하고 한번더클릭하면 function(B)가발생한다.적용된예제를보자

원클릭 커짐 한번더 클릭 원래대로

.boxing{ font-size:24px; font-weight:bold;}

$(document).ready(function(){
	 $('div').toggle(
      function(){ $('p').addClass('boxing'); },
      //첫번째함수
      function(){$('p').removeClass('boxing');}
      //두번재 함수
      );
		});

한번클릭하면 첫번째함수실행으로 boxing라는 클래스가 추가 되고 한번더 클릭하면boxing라는 클래스가 삭제 된다.따라서 css에따라 한번클릭시 크기가 커지고 두번재 클릭시 원래대로 돌아온다.

hover()

hover()는 css에서 잘아는 :hover와 같다고 보면된다. 마우스를 위에 올렸을때 그리고 내렸을때 이벤트이다.당연히 인자도 두개를 가진다.

$().hover(function(A) {} , function(B) {});

예제를 바로 보자.마우스를 위로 올릴때 테두리가 생기도록할것이다.

호버 테두리가 생기도록

.hovering{ border:1px solid #000;}

별반다를바 없다.클래스명을 hovering으로 해주엇을뿐이고 h2엘리먼트 자체에 효과가 적용되도록하는만큼 this를 사용했다.

$(document).ready(function(){
    $('h2').hover(
       function(){ $(this).addClass('hovering');},
       function( ){$(this).removeClass('hovering');}
       );
 		});      

이벤트함수에대해 알아봤다.hover()의 경우 css에도 있는데 굳이 사용하는이유는 이벤트 순서와 관련있다.예제는 http://sianasiatiger.cafe24.com/study/J_comevent.html