3.Effect, Event

Effect

요소에 대한 시각적인 효과들

Basics

.hide()      현재 요소 가림

.show()     현재 요소 보임

.toggle()    현재 요소 가리기/보이기 토글

Custom (Animation effect)

.animate()

.delay()

.finish()

.queue()

.dequeue()

.stop()

Fade

.fadeIn()          요소가 서서히 드러나도록 함

.fadeOut()       요소가 서서히 사라지도록함

.fadeTo()         요소가 서서히 사라지도록 하는데, 최종 투명도를 조절할 수 있음.

.fadeToggle()    fadeIn, fadeOut 효과 토글

Sliding

.slideDown()        슬라이드가 내려오며 요소들이 보이게함

.slideUp()            슬라이드가 올라가며 요소들을 숨김

.slideToggle()       슬라이드효과 토글

Event

요소에 발생하는 어떤 액션에 대한 반응

Document Loading

.load()         html 문서가 모두 읽어졌을때 callback을 실행한다.

.ready()        html문서가 모두 읽혔을때 callback 실행

Event Handler attachment

.on('event' , callback)        현재 요소에 'event'가 발생시 callback을 수행한다.

$(parent).on('event', 'target_selector', callback)    parent 요소 아래에 target에 event효과를 부여한다.

이와같은 정의 방식은 동적으로 생성, 제거되는 요소에도 event 효과를 부여가 가능한 live event 방식

.one('event', callback)        현재 요소에 일회성 event 효과를 부여한다.

아래는 deplecated method

.bind()

.unbind()

.delegate()

.undelegate()

Event type

아래 이벤트들은 .event( callback )으로 사용하거나, .on('event', callback) 을 이용해서 요소에 부여할수 있다.

Form Events

html에서 form에 의해 발생하는 event

.blur( callback )        요소에서 focus가 떠났을때 발생

.change( callback )    form요소에 변화가 생겼을때 발생 (checked나 selected 등)

.focusin( callback )     요소에 포커스가 왔을때 발생

.focusout( callback )   요소에서 포커스가 떠날때 발생

.select( callback )       현재 요소가 선택 되었을때 발생(select에서 option선택이 아니라 form요소 안에 내용을 더블클릭, 블럭으로 잡았을때)

.submit( callback )      submit 시 발생

Keyboard Events

.keydown()    key를 누르는 순간 발생

.keypress()    key가 눌리고 있을때 발생

.keyup()        key에서 손을 때는 순간 발생

key는 눌리는 key에 따라 keycode가 있다. 이를 읽어서 어느 키가 눌렀는지 알 수 있다.

Mouse Events

.click( callback )

.dblclick( callback )

.hover()

.mouseover()        마우스가 요소 위로 올라올때 이벤트 발생(다른 요소와 겹쳐있어도 무관)

mouseout()          마우스가 요소 밖으로 날때 이벤트 발생

.mouseenter()       마우스가 요소 위로 올랄때 이벤트 발생 (다른 요소가 겹쳐있다면 발생하지 않음)

.mouseleave()       마우스가 요소 밖으로 나갈때 이벤트 발생

.mousemove()      마우스 커서가 움직일때 발생

.