[Browser Events]
■ .error()
선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생하는 오류 이벤트
- .bind('error', handler) 의 축약형
.error( handler(eventObject) ) version 1.0
(예)
1) <img src="missing.png" alt="Book" id="book" />
2) $('#book').error(function() { alert('Handler for .error() called.') }); // 이미지가 로드되지 않을 경우 오류 이벤트 발생
■ .resize()
browser window의 사이즈가 변경될때 발생하는 이벤트
- .bind('resize', handler) 의 축약형
- .trigger('resize') 를 통하여 이벤트를 발생시킬 수 있다.
.resize( handler(eventObject) ) version 1.0
(예) $(window).resize(function() { $('#log').append('<div>Handler for .resize() called.</div>'); });
.resize() version 1.0
■ .scroll()
선택한 Element의 스크롤바가 움직일 경우 발생하는 이벤트
- .bind('scroll', handler) 의 축약형
- .trigger('scroll') 를 통하여 이벤트를 발생시킬 수 있다.
.scroll( handler(eventObject) ) version 1.0
(예) $('#target').scroll(function() { $('#log').append('<div>Handler for .scroll() called.</div>'); });
[Document Loading]
■ .load()
선택된 Element(URL : images, scripts, frames, iframes, 그리고 window object 등) 가 로드(load)가 완료되었을 때 발생하는 이벤트
- .bind('load', handler) 의 축약형
- "load" JavaScript event
.load( handler(eventObject) ) version 1.0
(예)
1) <img src="book.png" alt="Book" id="book" />
2) $('#book').load(function() { // Handler for .load() called. }); // 정상적으로 #book의 이미지가 로드되면 이벤트 발생
(예) $('img.userIcon').load(function(){ if($(this).height() > 100) { $(this).addClass('bigImg'); } });
(예) $(window).load(function () { // run code });
■ .ready()
DOM이 준비된(완전히 로드된) 이후 발생하는 특별한 이벤트
- <body onload=""> 와 .ready() 는 양립할 수 없으며 둘중에 하나만 사용하도록 한다.
- 또는 jQeury의 $(window).load() 함수에서 attach 해서 사용한다.
.ready( handler ) version 1.0
- $(document).ready(handler) == $().ready(handler) == $(handler) == $(document).bind("ready", handler)
(예) $(document).ready(function() {
// Handler for .ready() called.
});
■ .unload()
페이지가 unload될 때 발생하는 이벤트
- "unload" 자바스크립트 이벤트
- 이 이벤트는 브라우저별로 다르게 동작할 수 있다. (http://api.jquery.com/unload/ 참조)
.unload( handler(eventObject) ) version 1.0
(예) $(window).unload( function () { alert("Bye now!"); } );
[Event Handler Attachment]
■ .bind()
선택된 element에 이벤트 핸들러를 붙인다.
- blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,
- mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
- change, select, submit, keydown, keypress, keyup, error
.bind( eventType, [ eventData ], handler(eventObject) ) version 1.0
(예) $('#foo').bind('click', function() { alert('User clicked on "foo."'); });
(예) $('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); }); // 다중 이벤트
(예) $("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str);
}); // 이벤트 핸들러에 event 인자 포함
(예) $("p").bind("click", {foo: "bar"}, function(event){ alert(event.data.foo); }); // eventData 포함한 예제
(예) 커스텀 이벤트(Bind custom events)
.bind( events ) version 1.4
(예)
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
(예) 참고 : http://api.jquery.com/bind/
■ .unbind()
선택된 element의 선언된 이벤트 핸들러를 제거한다.
.unbind( eventType, handler(eventObject) )
(예) $('#foo').unbind(); // 선택된 element의 모든 이벤트 제거
(예) $('#foo').unbind('click'); // click 이벤트를 제거
(예) $('#foo').unbind('click', function() { alert('The quick brown fox jumps over the lazy dog.'); }); // 이벤트를 제거하면서 함수동작
■ .delegate()
선택된 Element의 selector의 이벤트 핸들러를 붙인다. (앞으로 추가될 element의 이벤트 핸들러도 적용된다.)
- live()함수를 보완하여 만들어진 함수
- http://honey83.cafe24.com/100
.delegate( selector, eventType, handler ) version 1.4.2
(예)
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
(예) $("body").delegate("a", "click", function() { return false; }) // 버블링 방지
(예) $("body").delegate("a", "click", function(event){ event.preventDefault(); }); // 기본 동작을 취소
.delegate( selector, eventType, eventData, handler ) version 1.4.2
(예) 커스텀 이벤트 --> http://api.jquery.com/delegate/
■ .undelegate()
선택된 Element의 이벤트 핸들러를 제거한다.
- (예) http://api.jquery.com/undelegate/
.undelegate() version 1.4.2
- 모든 이벤트 제거
.undelegate( selector, eventType ) version 1.4.2
(예) $("body").undelegate("p", "click");
.undelegate( selector, eventType, handler ) version 1.4.2
(예) $("body").undelegate("p", "click", function(){ "Does nothing..." }); // 이벤트가 제거되면서 function()함수가 호출된다.
■ .live()
선택된 element의 이벤트 핸들러를 바인드 한다.
- bind()와의 차이점은 append()등의 함수로 추가된 요소들에도 이벤트가 적용된다.
- 1.4.2버전 부터 live()함수를 보완한 delegate() 함수를 사용한다.
- eventType = click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
.live( eventType, handler ) version 1.3
(예) $("p").live("click", function(){ alert( $(this).text() ); });
(예) $("a").live("click", function() { return false; }) // 버블링 방지
(예) $("a").live("click", function(event){ event.preventDefault(); }); // 기본 동작을 취소
.live( eventType, eventData, handler ) version 1.4
(예) $("a").live("click", {foo: "bar"}, function(event){ alert(event.data.foo); });
■ .die()
선택된 element의 이벤트 핸들러중 live()함수에 의해 바인드된 이벤트 핸들러를 제거한다.
.die( eventType, [ handler ] ) version 1.4.1
(예) $("p").die() // 모든 live 이벤트의 바인드를 제거한다.
(예) $("#theone").die("click"); // live 이벤트의 click 바인드를 제거한다.
(예) $("#theone").die("click", function(){ ... }); // die()함수가 호출되면서 function()함수가 호출된다.
■ .one()
bind() 함수처럼 선택된 element에 이벤트 핸들러를 붙인다. 하지만 딱 한번의 이벤트를 발생시킨다.
- 즉 bind() 함수의 이벤트 핸들러 내부에서 unbind()한다.
.one( eventType, [ eventData ], handler(eventObject) ) version 1.1
(예) $('#foo').one('click', function() { alert('This will be displayed only once.'); });
== $('#foo').bind('click', function(event) { alert('This will be displayed only once.'); $(this).unbind(event); });
■ .jQeury.proxy()
컨텍스트의 이벤트 핸들러를 리턴한다.
(예) http://api.jquery.com/jQuery.proxy/
■ .trigger()
선택된 element의 이벤트를 발생시킨다.
.trigger( eventType, extraParameters ) version 1.0
(예)
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
(예) custom event 트리거
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
(예)
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
(예) http://api.jquery.com/trigger/
■ .triggerHandler()
trigger()함수와 비슷하게 동작한다.
- 예외
1) form submission에는 동작하지 않는다.
2) 선택된 Element중 가장 첫번째 element만 영향을 미친다.
3) 브라우저의 기본동작(default actions), bubbling, live events는 일어나지 않습니다. 단순히 handler 메서드를 호출만 합니다.
http://api.jquery.com/triggerHandler/ 의 예제 참고
.triggerHandler( eventType, extraParameters ) version 1.2
[Event Object]
이벤트 핸들러(function(event)) 의 파라메터로 사용된다.
- var e = jQuery.Event("click");
멤버
- event.currentTarget
- event.data
- event.isDefaultPrevented()
- event.isImmediatePropagationStopped()
- event.isPropagationStopped()
- event.pageX
- event.pageY
- event.preventDefault()
- event.relatedTarget
- event.result
- event.stopImmediatePropagation()
- event.stopPropagation()
- event.target
- event.timeStamp
- event.type
- event.which
(예) http://api.jquery.com/category/events/event-object/
[Form Events]
■ .focus()
자바스크립트의 focus 이벤트
- form 컨트롤의 포커스가 생겼을때 발생되는 이벤트
.focus( handler(eventObject) )
(예) $(select).focus(function( alert('focused'); ));
.focus()
- trigger('focus')와 같은 기능을 제공
■ .blur()
자바스크립트의 blur 이벤트
- form 컨트롤의 포커스를 잃어버림, focus이벤트의 반대기능
.blur( handler(eventObject) ) version 1.0
- .bind('blur', handler) 와 동일
(예) $('#target').blur(function() { alert('Handler for .blur() called.'); });
.blur() version 1.0
- trigger('blur')와 같은 기능을 제공
■ .change()
자바스크립트의 change 이벤트
-선택박스, 텍스트박스, 체크박스, 라디오버튼 등의 입력값, 선택값 변경 이벤트
.change( handler(eventObject) ) version 1.0
- .bind('change', handler) 와 동일
(예) $('#target').blur(function() { alert('Handler for .change() called.'); });
.change() version 1.0
- trigger('change')와 같은 기능을 제공
■ .select()
자바스크립트의 select 이벤트
- <input type="text">와 <textarea> 에만 사용된다.
- 텍스트가 선택될 때 발생되는 이벤트
.select( handler(eventObject) ) version 1.0
- .bind('select', handler) 와 동일
(예) $('#target').select(function() { alert('Handler for .select() called.'); });
.select() version 1.0
- trigger('select')와 같은 기능을 제공
■ .submit()
자바스크립트의 submit 이벤트
- <form> 요소에만 사용된다.
- <input type="submit">, <input type="image">, or <button type="submit"> 에서 submit하는 기능
.submit( handler(eventObject) ) version 1.0
- .bind('submit', handler) 와 동일
(예) $('#target').submit(function() { return true; });
.submit() version 1.0
- $('#target').submit(); == $('#target').trigger('submit')와 같은 기능을 제공
[Keyboard Events]
■ .focusin()
자바스크립트의 focusin 이벤트
- .bind('focusin', handler). 와 동일
- 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트
.focusin( handler(eventObject) ) version 1.4
(예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
■ .focusout()
자바스크립트의 focusout 이벤트
- .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
- 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트
.focusout( handler(eventObject) ) version 1.4
(예) http://api.jquery.com/focusout/
■ .keydown()
자바스크립트의 keydown 이벤트
- .bind('keydown', handler). 와 동일
- 선택된 element가 포커스되어 있고 키보드를 누르고 있을때 발생되는 이벤트
.keydown( handler(eventObject) ) version 1.0
(예) http://api.jquery.com/keydown/
(예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });
■ .keyup()
자바스크립트의 keyup 이벤트
- .bind('keyup', handler). 와 동일
- 선택된 element가 포커스되어 있고 키보드를 누른 키보드를 띌 때 발생되는 이벤트
.keyup( handler(eventObject) ) version 1.0
(예) http://api.jquery.com/keyup/
(예) $('#target').keyup(function(event) { alert('Handler for .keyup() called.'); });
■ .keypress()
자바스크립트의 keypress 이벤트
- .bind('keypress', handler). 와 동일
- 선택된 element가 포커스되어 있고 키보드를 눌렀을때 발생되는 이벤트
- 실제 키보드가 눌렸을때 발생되는 이벤트 순서 : keydown or keypress > keyup
.keypress( handler(eventObject) ) version 1.0
(예) http://api.jquery.com/keypress/
(예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });
KeyDown, KeyPress, KeyUp Event 차이
- http://mytory.textcube.com/495, http://hurrah.springnote.com/pages/1099088, http://winflahed.tistory.com/72
[Mouse Events]
■ .click()
선택된 element를 클릭했을때 발생하는 이벤트
.click( handler(eventObject) ) version 1.0
(예) $('#target').click(function() { alert('Handler for .click() called.'); });
.click() version 1.0
- $('#target').click(); == $('#target').trigger('click');
■ .dblclick()
선택된 element를 더블 클릭했을때 발생하는 이벤트
.dblclick( handler(eventObject) ) version 1.0
(예) $("p").dblclick( function () { alert("Hello World!"); });
.dblclick() version 1.0
- $('#target').click(); == $('#target').trigger('click');
■ .focusin()
자바스크립트의 focusin 이벤트
- .bind('focusin', handler). 와 동일
- 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트
.focusin( handler(eventObject) ) version 1.4
(예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
■ .focusout()
자바스크립트의 focusout 이벤트
- .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
- 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트
.focusout( handler(eventObject) ) version 1.4
(예) http://api.jquery.com/focusout/
■ .hover()
선택된 element에 마우스가 올라갔을때와 밖으로 나왔을때에 발생되는 이벤트
- hover()를 unbind()할 경우 = $(obj).unbind('mouseenter mouseleave');
.hover( handlerIn(eventObject), handlerOut(eventObject) ) version 1.0
(예)
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
■ .mouseover()
자바스크립트의 mouseover 이벤트
- 선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
- .bind('mouseover', handler) 와 동일,
- 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseenter() 함수를 사용 (http://api.jquery.com/mouseover/)
.mouseover( handler(eventObject) ) version 1.0
(예)
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
.mouseover() version 1.0
■ .mouseout()
자바스크립트의 mouseout 이벤트
- 선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
- .bind('mouseout', handler) 와 동일,
- 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseleave() 함수를 사용 (http://api.jquery.com/mouseover/)
.mouseout( handler(eventObject) ) version 1.0
(예)
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
.mouseout() version 1.0
■ .mouseenter()
선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
- IE에서만 제공되는 mouseenter 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
- .bind('mouseenter', handler) 와 동일,
- 비슷한 함수 = .mouseover() , 차이점 : 버블링의 발생여부
.mouseout( handler(eventObject) ) version 1.0
(예)
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
$("p:last",this).text(++n);
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
});
.mouseout() version 1.0
■ .mouseleave()
선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
- IE에서만 제공되는 mouseleave 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
- .bind('mouseleave', handler) 와 동일,
- 비슷한 함수 = .mouseout() , 차이점 : 버블링의 발생여부
.mouseout( handler(eventObject) ) version 1.0
(예) .mouseenter() 함수 예제 참고
.mouseout() version 1.0
■ .mousemove()
선택된 element에 마우스가 포인터가 움직일때 발생되는 이벤트
- .bind('mousemove', handler) 와 동일,
.mousemove( handler(eventObject) ) version 1.0
(예) $("div").mousemove(function(e){ alert(e.pageX + " / " + e.pageY); } );
.mousemove() version 1.0
■ .mousedown()
선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누를때 발생되는 이벤트
- .bind('mousemove', handler) 와 동일,
.mousedown( handler(eventObject) ) version 1.0
(예)
$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down.</span>');
});
.mousedown() version 1.0
■ .mouseup()
선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
- .bind('mouseup', handler) 와 동일,
.mouseup( handler(eventObject) ) version 1.0
(예) .mousedown() 함수 예제 참고
.mousedown() version 1.0
■ .toggle()
선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
.toggle( handlerA(eventObject), handlerB(eventObject), [ handlerC(eventObject) ] ) version 1.0
- handlerA(eventObject) : 짝수번째 클릭시 이벤트
- handlerB(eventObject) : 홀수번째 클릭시 이벤트
- handlerC(eventObject) : 추가 핸들러로 클릭 후에 A,B 이벤트핸들러가 발생된 이후 발생되는 이벤트
(예)
$('#target').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
.toggle( [ duration ], [ callback ] ) version 1.0
(예) http://api.jquery.com/toggle/ 참고
