[jQuery] Events
[Browser Event]
● .error() : 선택된 개체(images, window, document...)가 정확하게 로드되지 않을 경우 발생하는 오류 이벤트.
- .bind("error",handler) 의 축약형.
● .resize() : browser window의 사이즈가 변경될때 발생하는 이벤트
- .bind("resize", hadler)의 축약형.
- .trigger("resize") 를 통하여 이벤트를 발생시킬수 있다.
● .scroll() : 선택된 element의 스크롤바가 움직일경우 발생하는 이벤트
- .bind("scroll", handler)의 축약형
- .trigger("scroll")을 통하여 이벤트를 발생 시킬수 있다.
[Document Loading]
● .load() : 선택된 element (URL: images, scripts,frames,iframes,window Object..등등(개별적)) 가 로드 완료 되었을때 발생하는 이벤트
- .bind("load", handler)의 축약형
● .ready() : DOM이 준비된(완전히 로드된) 이후 발생하는 이벤트
- javascript <body onload=" "> 와 .ready() 는 양립할수 없으면 둘중 하나만 사용해야된다.
- jQuery의 $(window).load() 함수에서 attach 해서 사용한다.
● .unload() : 페이지가 unload될때 발생하는 이벤트 (브라우저별 다르게 동작할수 있다.)
- $(window).unload( function (){ alert("Bye Now!"); });
[Event Handler Attachment]
● .bind() : 선택된 element에 이벤트 핸들러를 붙인다. (요소와 이벤트를 연결한다는 주목적을 생각하면 된다.)
- blur, focus, focusin, focusout, load, resize, scroll, unload, click, dbclick
- mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave
- change, select, submit, keydown, keypress, keyup, error
//기본 //다중 이벤트
$('#foo').bind('click', function() { $('#foo').bind('mouseenter mouseleave', function() {
alert('User clicked on "foo."'); $(this).toggleClass('entered');
}); });
//map
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
● .unbind() : 선택된 element의 선언된 이벤트 핸들러를 제거한다.
- $('#foo').unbind(); //선택된 element의 모든 이벤트 제거.
- $('#foo').unbind('click'); // click 이벤트를 제거
- $('#foo').unbind('click',fucntion(){ // 이벤트를 제거하면서 함수 실행.
alert('The quick brown fox jumps over the lazy dog.');
});
● one() : bind() 함수처럼 선택된 element 에 이벤트 핸들러를 붙인다.
- 하지만 딱 한번의 이벤트만 발생시킨다.
- 즉, bind() 함수의 이벤트핸들러 안에서 unbind() 하는것과 같다고 보면 된다.
$("#foo").one("click", function(){ == $("#foo").bind("click", function(event){
alert("only once"); alert("only once");
}); $(this).unbind(event);
};
※ 바인드형 함수 _ 추가되는 요소에도 이벤트 적용할시
$(elements).on(events, selector, data, handler); // jQuery 1.7+
$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(elements).live(eventType, eventData, handler); // jQuery 1.4+
● .on() : .on() 함수는 jQuery 객체 안의 현재 선택된 요소 집합과 이벤트 핸들러를 묶어 줍니다 (* 추가될 element의 이벤트 핸들러도 적용된다.)
// p 태그를 클릭하면 알림창이 나타납니다.
$("p").on("click", function(){ alert( $(this).text() ); });
// 이벤트 핸들러에 데이터를 전달하고, foo 값을 알림창으로 보여줍니다.
function myHandler(event) { alert(event.data.foo); }
$("p").on("click", {foo: "bar"}, myHandler)
폼의 submit를 막고 false를 인자로 하여 이벤트가 버블링되는 것을 차단합니다.
$("form").on("submit", false)
.preventDefault() 함수로 기본적인 액션을 취소시킵니다.
$("form").on("submit", function(event) { event.preventDefault(); });
.stopPropagation()를 사용하여 폼 submit을 방해하지 않고 버블링에 의한 submit을 방지합니다..
$("form").on("submit", function(event) { event.stopPropagation(); });
● .delegate() : 선택된 element의 selector 에 이벤트 핸들러를 붙인다. (* 추가될 element의 이벤트 핸들러도 적용된다.)
live() 함수 보완하여 만들어진 함수.
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
// 함수는 새로 추가된 p에도 자동적용됨. 새로 만들어진 애들 클릭해도 또 추가.
(delegate('p'....)에서 p에 click 이벤트를 적용)
● .undelegate() : 선택된 element의 이벤트 핸들러를 제거한다.
.undelegate() //모든이벤트 제거
$("body").undelegate("p","click");
$("body").undelegate("p","click",function(){ alert("");});
● .live() : 선택된 이벤트 핸드러를 바인드 한다.
.live(eventType, handler) Ver 1.3
$("p").live("click", functin(){alert($(this).text());});
$("p").live("click", functin(){ return false; }); //버블링 방지
$("p").live("click", functin(event){ event.preventDefault(); }); //기본동작 취소
.live(eventType, eventData, handler) Ver 1.4
$("a").live("click",{foo:bar},function(event){alert{event.data.foo);});
● .die() : 선택된 이벤트 핸들러중 live()함수에 의해 바인드된 이벤트 핸들러를 제거한다.
$("p").die(); // 모든 live이벤트 바인드 제거
$("#theone").die("click") // #theone 요소의 live 이벤트 - click바인드를 제거한다.
$("#theone").die("click", function(){...실행할함수..}); //die 실행 함수호출.
● .jQuery.proxy() : 컨텍스트의 이벤트 핸들러를 리턴한다.
http://api.jquery.com/jQuery.proxy/
● .trigger() : 선택된 element의 이벤트를 발생시킨다.
.trigger( eventType, extraParameters)
$("#foo").bind("click", function(){ alert("$(this).text") });
$("#foo").trigger("click");
//custom 이벤트 트리거
$("#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);
● .triggerHandler : - form submission 에는 동작하지 않는다.
- 선택된 element중 가장 첫번째 element만 영향을 미친다.
- 브라우저의 기본동작(default action), 버블링, live events는 일어나지 않음.
(단순히 handler 메서드를 호출)
[Event Object]
● 이벤트 핸들러( function(event))의 파라메터로 사용된다.
- var e = jQuery.Event("click");
맴버 : event.currentTarget
event.data
event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.pageX
event.pageY
event.preventDefault
event.relatedTarget
event.result
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
[Form Events]
예) .focus(handler(eventObject))
$(select).focus( function(alert("focused");));
.focus() == trigger("focus")
● .focus() : form컨트롤의 포커스가 생겼을때 발생되는 이벤트
● .blur() : form 컨트롤의 포커스를 잃어버림 (<!=> focus())
● .change() : 선택박스,텍스트박스,체크박스,라디오버튼 등의 입력값 , 선택값 변경 이벤트
● .select() : <input type = text /> ,<textarea> 에만 사용된다 : 텍스트가 선택될때 발생되는 이벤트
-* 텍스트 Drag시 발생되는 이벤트(scroll 이벤트)
-또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다..
-셀렉트 박스와 혼동하지 말것.
● .submit : <form> 요소에만 사용된다.
<form id="target" action="destination.html">
<input type="text" value="Hello there" />
<input type="submit" value="Go" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').submit(function() {
alert('Handler for .submit() called.');
return false;
});
// 수동 호출
$('#other').click(function() {
$('#target').submit();
});
[Keyboard Events]
● .focusin() : 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트
● .focusout() : 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트
● .keydown() : 선택된 elememt 가 포커스 되어있고 키보드를 누르고 있을때 발생되는 이벤트
● .keyup() : 선택된 elememt 가 포커스 되어있고 키보드를 누른 키보드를 띌 때 발생되는 이벤트
● .keypress() : 선택된 elememt 가 포커스 되어있고 키보드를 눌렀을때 발생되는 이벤트
* 실제 키보드 사용시 발생되는 이벤트 순서 down or press -> up
[Mouse Events]
● .click : 선택된 이벤트 클릭했을때 발생하는 이벤트
● .dbclick : 선택된 이벤트 더블 클릭했을때 발생하는 이벤트
● .hover() : 선택된 element에 마우스가 올라갔을때와 밖으로 나왔을때 발생되는 이벤트. (mouseEnter, mouseLeave)
● .mouseover() : 선택된 element에 마우스 포인터가 올려졌을때 발생되는 이벤트 ( 버블링 발생)
● .mouseout() : 선택된 element에서 마우스가 빠져나왔을때 발생되는 이벤트 ( 버블링 발생)
-개선 (IE에서만 제공되는 mouseenter 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐)
● .mouseenter() : 선택된 element에 마우스포인터가 올려졌을때 발생되는 이벤트
● .mouseleave() : 선택된 element에 마우스 포인터가 빠져 나왔을때 발생되는 이벤트
● .mousemove() : 선택된 element에 마우스 포인터가 움직일때 발생되는 이벤트
● .mousedown() : 선택된 element에 마우스 포인터가 올려져있고 마우스 버튼을 누를때 발생되는 이벤트
● .mouseup() : 선택된 element에 마우스 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌때 발생되는 이벤트
● .toggle() : 선택된 element에 마우스 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌때 발생되는 이벤트
$("#target").toggle(function(){
alert("first handler for.toggle() called");
}, function(){
alert("second handler for.toggle() called");
});
'jQuery' 카테고리의 다른 글
| 제이쿼리 셀렉터 요약 (0) | 2014.02.04 |
|---|---|
| jQuery select box 제어 (0) | 2014.02.04 |
| 3.jQuery Manipulation (0) | 2013.12.07 |
| 2.jQuery CSS (0) | 2013.12.06 |
| 1.jQuery Core [선택자] (0) | 2013.12.05 |