[7] jQuery - Event

[1] on() / off() 

- $ ( function () {

① $(selector).on( eventname , function (){} );

② $(selector).on({ mouseenter : function (){},

       mouseleave : function (){}

    });

});

- $ ( function () {

  $(selector).off()

  $(selector).off( eventName ) : 문서객체의 특정 이벤트와 관련된 모든 이벤트 제거

  $(selector).off( eventName , function (){} ); : 특정 이벤트와 관련된 특정 이벤트 리스너 제거

});

# 이벤트 연결 방식 #

 

① bind 형식 : 현재 존재하는 태그에만 이벤트 연결

$(selector).on( eventName , function () {} );

② delegate 형식 : 현재 + 미래에 존재하는 태그에 이벤트 연결

$(selectorA).on( eventName , selectorB , function (){} );

$(selectorA).off( eventName , selectorB );

A는 B의 상위 태그로써 A에 이벤트를 연결한다

$(document).on( 'click' , 'h1' , function (){}) ;

$(document).off ( 'click' , 'h1' ) ;

[2] context() / find()

- $( selector , context ) : selector 의 범위를 한정

→ $ ( function () {

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

  var h1 = $( 'h1' , this ).text() ; → div 태그에 있는 h1 태그 선택

  var p = $ ( 'p' , this ).text() ; → div 태그에  있는 p 태그 선택

  alert ( h1 +  '\n'+p );

});

});

→ $ ( function () {

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

var h1 =  $(this).find( 'h1' ).text()

var p =   $(this).find( 'p' ).text()

alert ( h1 + '\n' + p );

});

}); 

 [3] 이벤트 객체

- 이벤트 객체 속성

① event.pageX : browser화면을 기준으로 한 마우스의 X좌표 위치

② event.pageY : browser화면을 기준으로 한 마우스의 Y좌표 위치

③ event.preventDefault() : 기본 이벤트 제거 

④ event.stopPropagation() : 이벤트 전달 제거

→ return false; 를 사용하면 두가지 이벤트가 적용된다

[4] Mouse Event ( on(eventName,function (){}); )

- click

- dblclick

- mousedown : 마우스 버튼을 누를 때 발생

- mouseup : 마우스 버튼을 뗄 때 발생

- mouseenter : 요소의 경계 외부에서 내부로 이동할 때

- mouseleave : 요소의 경계 내부에서 외부로 이동할 때

[5] Keyboard Event

- 사용자가 키보드를 누른다

- keydown 발생

- 글자가 입력된다

- keypress 발생

- 사용자가 키보드에서 손을 뗀다

- keyup 발생

[6] Window Event

- scroll : 스크롤 할 때

- error : 에러가 있을 때

- load , unload : 문서객체(window)를 불러오거나 닫을 때

[7] Form Event

- change : 입력 양식의 내용을 변경할 때 ( checkbox , radio )

- select : 입력 양식을 선택할 때

- focus : 입력 양식에 초점을 맞출 때

- submit : submit버튼을 클릭할 때

[8] Effect

 

① 기본 시각 효과 ( 저수준의 효과 )

 

- $(selector).method();

- $(selector).method( speed ); spped →  'slow' , 'normal' , 'fast'

- $(selector).method( speed , easing ); easing → 'linear' , 'swing'

- $(selector).method( speed , easing , callback ); callback → function (){} : 효과를 준 후 실행할 함수

 

- show() : 객체를 점점 크게 하며 보여준다

- hide() : 객체를 점점 작게 하며 사라지게한다

- toggle() : show() 와 hide() 번갈아 실행

- slideDown() : 객체를 슬라이드 효과와 함께 보여준다 

- slideUp() : 객체를 슬라이드 효과와 함께 사라지게한다.

- slideToggle() : down() 과 up을 번갈아 실행

- fadeOut() : 객체를 흐리게 사라지게한다

- fadeIn() : 객체를 선명하게 보여준다

- fadeToggle() : out() 과 in() 을 번갈아 실행

 

 

② 사용자 정의 효과 ( animate )

 

- $(selector).animate( object );

- $(selecctor).animate( object , speed );

- $(selector).animate( object , speed , easing );
- $(selector).animate( object , speed , easing , callback );

 

→ $(selector).animate (  { opacity : 0~1 } ,

   { height : 300 }   

);

object : opacity , height , width , top , right , bottom , left , margin , padding

 

 

③ 상대적 애니메이션

 

- 활용 : $( function () {

 $('#example').on( ' click ' , function () {

var width = $(this).css( ' width ');

var height = $(this).css( ' height ');

$(this).animate( { width : ' += 50px '  ,

height : ' += 50px ' 

    } , 'slow' ) 

});

});

 

 

[9] Animation Queue

 

- $(selector).animate( { width : 200 } , 2000 ) .animate ( { width : 0 } , 2000 ) ;

- animate는 순서대로 적용되어진다

 

① 애니메이션 정지

 

- $(selector).stop();

- $(selector).stop( Boolean ClearQueue );

- $(selector).stop( Boolean ClearQueue , Boolean GotoEnd );

 

ClearQueue : true :

 false :

GotoEnd : true : stop이 발생했을 때 실행중이던 애니메이션을 완료상태로 보낸다

   false : stop이 발생했을 때 실행중이던 애니메이션의 그 순간 바로 정지

 

② 애니메이션 딜레이

 

- $(selector).delay( ... );

- ... → 0000 ms