하코사 jQuery 스터디 Ch.9

1. HACOSA jQuery STUDY
#9. 고급이벤트

2. jQuery를 동적으로 로드하는 경우 올바로 동작하게 만들기
• jQuery가 로드 된 이후에 실행될 추가적인 스크립트를 삽입
<script type=“text/javascript”>
$(“#button”).click(function(){
$(“#container”).fadeIn();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
실행 X
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type=“text/javascript”>
$(“#button”).click(function(){
$(“#container”).fadeIn();
});
</script>
실행 O

3. 전역 이벤트 빠르게 발생시키기
• 모든 요소에 대해 특정 이벤트와 바인드 된 처리기들을 호출
‒ jQuery.trigger() 호출
→트리깅 시킬 모든 요소에 대해 알고 있을 필요가 없기 때문에 간단.
→BUT, jQuery 이벤트 시스템에 등록된 모든 요소를 조사하게 되기 때문에 약간
씩 멈추는 현상을 일으킬 수 있다.
→ * 책이 이상한 건지… jQuery.trigger()는 없는 메소드로 나옴 ……… ;;;

4. 전역 이벤트 빠르게 발생시키기
‒ 리스너 플러그인 제작
(function( $ ){
// String.split(str) : str을 기준으로 문자열을 분리하며 배열로 반환
var copiedMethods = 'bind unbind one trigger triggerHandler'.split(' ');
function Listener(){ };
$.each(copiedMethods, function(i,name){
Listener.prototype[name] = $.fn[name];
});
Listener.prototype.each = function(fn) {
fn.call(this); return this;
};
$.listener = function( data ){
return $.extend(new Listener(), data);
};
})( jQuery );
$.page = $.listener(
title : ‘start’,
changeTo : function( title ){
this.title = title;
this.trigger(‘change’);
}
);
$.page.changeTo(‘Inbox);

5. 자체 이벤트 만들기
• jQuery.event.special을 사용하여 자체 이벤트 제작
$.event.special.myEvent = {
add : function(handler, data, namespaces){
},
setup : function(data, namespaces){
},
remove : function(namespaces){
},
teardown: function(namespaces){
}
};
$(“#some_element”).bind(‘myEvent’, {foo:’bar’}, function(){ …. });

6. 자체 이벤트 만들기
‒ jQuery.event.special을 사용하여 작성된 사용자정의이벤트 예제
var event = jQuery.event;
var $selected = event.special.selected = {
setup : function( data ){
event.add(this, 'click', $selected.handler); // event.add(this[i], type, handler, data)
return false;
},
teardown:function(){
event.remove(this, 'click', $selected.handler);
return false;
},
handler : function(){
var $elem = jQuery(this);
if( !$elem.hasClass('disabled') )
$elem.triggerHandler('selected');
}
};
$('tr').bind('selected',function(){
$('tr').removeClass('selected');
$(this).addClass('selected');
});
→예제 : http://jquery-cookbook.com/examples/08/03/

7. 이벤트 처리기가 필요한 데이터를 제공하게 하기
• jQuery.Event 개체를 이용
var e = $.event(‘updateName’);
$(“#name”).bind(‘updateName’, function(e){
e.name = this.value;
});
$(‘#name’).trigger(e);
alert(e.name);

8. 이벤트 주도적인 플러그인 만들기
• 이벤트를 사용하여 외부에서 제어 될 수 있는 플러그인 제작
‒ 플러그인에게 어떤 동작을 수행하라고 지시
‒ 교재 p.300~ 참고 ;;;
→이벤트를 통해 기능 노출
// Plugin 내부 코드 중
$img.bind(‘prev’, prev).bind(‘next’, next).bind(‘goto’, function(e, index){
show(index);
});
// 실제 모델 구현 코드
$(“#prev”).click(function(){
$image.trigger(‘prev’);
});
$(“#next”).click(function(){
$image.trigger(‘next’);
});

9. jQuery 메서드가 호출되었을 때 통지받기
• jQuery를 사용하여 DOM요소가 변경될 때 어떠한 동작을 수행
하게 함
‒ 메서드를 재정의 하여 메서드가 호출 될 때마다 이벤트를 발생시킴
방법 (코드는 교재 참고)
1. 메서드 재정의
• jQuery 메서드를 사용자 정의 메서드로 교체하는 함수 정의
2. 실행에 앞서 이벤트 발생
• 들어오는 인자(이벤트)를 변경 가능하게 하는 이벤트 발생 시키기
3. 원래 메서드 실행
• 원래의 메서드를 호출
4. 실행 후 이벤트 발생
• 원래의 메서드 실행 후 반환된 데이터를 외부에서 수정할 수 있도록 최종 이벤트를 발생시킴
5. 결과 반환
• 최종 결과 데이터를 반환하고 정상적인 실행이 이어지게 함

10. 개체의 메서드를 이벤트 리스너처럼 사용하기
• 메서드와 어트리뷰트를 가지는 개체가 있을 때, 개체의 메서드
를 이벤트 처리기로 전달하기 위한 방법
function Persion(name){
this.name = name;
this.married = false;
}
$.extend(Person.prototype, {
whatIsYourName : function(){
alert(this.name);
},
updateMarriedState: function(){
var checkbox = e.currentTarget;
this.married = checkbox.checked;
}
});
var peter = new Person(‘Peter’);
var susan = new Person(‘Susan’);
$(“#c1”).bind(‘change’, peter.updateMarriedState, peter);
$(“#c2”).bind(‘change’, susan.updateMarriedState, susan);

11. END