안녕하세요. 명월입니다.
이번 포스트는 Jquery 중에서 Event에 관계된 함수를 공부하겠습니다.
jquery의 이벤트는 Window, Document 그리고 Dom의 동작에 대한 반응입니다. Jquey의 Event 함수가 많기 때문에 한번에 모든걸 공부하기는 힘들고 네 파트로 나누어서 공부를 하겠습니다.
Jquery Event - Jquery Api Document
저는 이벤트를 크게 Attachment, Mouse Events, EventObject, 나머지 이벤트 파트로 나누겠습니다.
Event handler Attachment는 Dom에 Event를 붙이는 함수입니다.
| 함수 | 설명 |
|---|---|
| .bind() | 요소에 대한 이벤트 핸들을 연결합니다. |
| .delegate() | 하위 엘리먼트의 선택자에 일치 하는 요소에 대해 이벤트 핸들을 연결합니다. |
| .live() | .bind와 .delegate는 정적 dom에 대한 인벤트를 연결할 수 있으나 동적 dom에 대한 이벤트를 연결할 수 없다. 이에 동적 dom에 대한 이벤트 핸들을 연결하는 함수입니다.(1.7 버젼이후에는 사용하지 않습니다.) |
| .on() | .live()함수의 1.7버전 이후의 대체 함수로써 delegate(), live()의 통합 버전입니다. |
| .unbind() | .bind()로 연결된 이벤트를 제거합니다. |
| .undelegate() | .delegate()로 연결된 이벤트를 제거합니다. |
| .die() | .live()로 연결된 이벤트 헨들러를 제거합니다.(1.7 버전 이후에는 사용하지 않습니다.) |
| .off() | .on()로 연결된 이벤트 핸들러를 제거합니다. |
| .one() | 일회성 .bind() 함수 처리를 합니다. |
| .trigger() | 지정된 요소의 처리기와 이벤트 핸들러를 실행합니다. |
| .triggerHandler() | 지정된 요소의 이벤트 핸들러를 실행합니다. |
| jQuery.proxy() | 이벤트 핸들러의 proxy 패턴입니다. |
저는 Attachment 함수를 bind만 사용하고 있었는데 정리하고 보니깐 꽤 많네요. 이 Attachment함수 중에서 특이점은 delegate, live, on 이 세 함수입니다.
dalegate는 HTML 태그에 있는 정적인 DOM에 이벤트를 연결하는 것입니다. .live()는 .append() 함수 또는 .html() 함수로 동적을 생성된 DOM에 이벤트를 연결하는 것입니다.
그런데 이것이 함수로 구분되어있으니 헷갈리는 요소도 있고 버그도 상당히 많이 발생해서 1.7버전 이후로는 .on() 함수로 통합이 되었습니다.그냥 .on()함수만 사용하면 되겠네요..
그리고 혼동되는 요소로는 .trigger()와 .triggerHandler()가 있는데 간단하게 말해서 처리기가 되는가 안되는 가의 차이입니다.
즉, focus 트리거를 하면 focus의 해당하는 이벤트핸들러는 실행되지만 포커스 처리를 하는가 안하는가의 차이입니다.
예제로 확인해 보도록 하겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<div style="max-width:520px;height:300px;overflow:auto;">
<div style="width:500px" id="exam"></div>
<script>
//proxy 예제
var customEvent = {
handler : function() {
$("div#exam > input").val("focus!");
}
};
//dovument onLoad
$(function(){
var dom = "<button>bind</button><br />";
dom += "<span>SPAN</span><br />";
dom += "<input type='text' id='texta'><br />";
dom += "<input type='text' id='textb'><br />";
dom += "<button>unbind</button>";
//요소 만들기
$("div#exam").html(dom);
//첫번째 버튼에 bind - bind함수도 동적요소에 적용이 된다.
$("div#exam > button:first-child").bind("click",function(e){
//examTest 클래스를 붙힌다.
//span 롤오버가 가능하다.
$("div#exam > span").addClass("examTest");
//마지막 버튼에 일회성 이벤트 생성
$("div#exam > button:last-child").one("click",function(e){
//span 롤오버 제거
$("div#exam > span").removeClass("examTest");
//트리거 실행
$("div#exam > input#textb").trigger('focus');
//트리거 핸들러 실행
$("div#exam > input#texta").triggerHandler('focus');
});
});
//span.examTest 동적 요소의 mouseover
$(document).on("mouseover","span.examTest",function(e){
$(this).css("background-color","blue");
});
//span.examTest 동적 요소의 mouseout
$(document).on("mouseout","span.examTest",function(e){
$(this).css("background-color","white");
});
//customEvent 클래스를 proxy연결
$("div#exam > input").bind('focus',$.proxy(customEvent,'handler'));
});
</script>
</div>
</BODY>
</HTML>
위 예제를 보면 먼저 document 로딩이 끝나고 span과 마지막 버튼에 이벤트를 연결합니다. 마지막 버튼을 누르면 span의 요소를 제거하고 textbox로 트리거를 연결합니다..
이때의 trigger와 triggerhandler의 차이는 trigger를 실행한 후에는 해당 textbox에 focus가 도달합니다. 다시말해, trigger로 연결된 textbox는 커서가 움직이지만 triggerhandler의 경우는 focus의 해당하는 함수 즉,customEvent의 handler함수만 호출됩니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [HTML] Open graph (오픈 그래피, og 태그) (0) | 2020.01.12 |
|---|---|
| [HTML] 메타 태그(SEO 최적화 포함) (0) | 2020.01.12 |
| [HTML] Html의 태그 구조 (1) | 2020.01.09 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events) (0) | 2016.03.30 |
| [Jquery, CSS] Jquery의 CSS 관련 함수 (0) | 2016.03.28 |
| [Jquery] Attributes 관련 함수 (0) | 2016.03.27 |
| [Jquery] Selector (선택자) (0) | 2016.03.26 |
| [Jquery] Ajax(비동기 통신)와 Json (0) | 2015.07.05 |