hacosa j query 9th
TRANSCRIPT
HACOSA jQuery STUDY#9. 고급이벤트
jQuery를 동적으로 로드하는 경우 올바로 동작하게 만들기
• jQuery가 로드 된 이후에 실행될 추가적인 스크립트를 삽입
실행 X
실행 O
<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>
<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>
전역 이벤트 빠르게 발생시키기
• 모든 요소에 대해 특정 이벤트와 바인드 된 처리기들을 호출
‒ jQuery.trigger() 호출
→트리깅 시킬 모든 요소에 대해 알고 있을 필요가 없기 때문에 간단.
→BUT, jQuery 이벤트 시스템에 등록된 모든 요소를 조사하게 되기 때문에 약간
씩 멈추는 현상을 일으킬 수 있다.
→ * 책이 이상한 건지… jQuery.trigger()는 없는 메소드로 나옴 ……… ;;;
전역 이벤트 빠르게 발생시키기
‒ 리스너 플러그인 제작
(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);
자체 이벤트 만들기
• 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(){ …. });
자체 이벤트 만들기
‒ jQuery.event.special을 사용하여 작성된 사용자정의이벤트 예제
→예제 : http://jquery-cookbook.com/examples/08/03/
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');
});
이벤트 처리기가 필요한 데이터를 제공하게 하기
• jQuery.Event 개체를 이용
var e = $.event(‘updateName’);
$(“#name”).bind(‘updateName’, function(e){
e.name = this.value;
});
$(‘#name’).trigger(e);
alert(e.name);
이벤트 주도적인 플러그인 만들기
• 이벤트를 사용하여 외부에서 제어 될 수 있는 플러그인 제작
‒ 플러그인에게 어떤 동작을 수행하라고 지시
‒ 교재 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’);
});
jQuery 메서드가 호출되었을 때 통지받기
• jQuery를 사용하여 DOM요소가 변경될 때 어떠한 동작을 수행
하게 함
‒ 메서드를 재정의 하여 메서드가 호출 될 때마다 이벤트를 발생시킴
방법 (코드는 교재 참고)
1. 메서드 재정의
• jQuery 메서드를 사용자 정의 메서드로 교체하는 함수 정의
2. 실행에 앞서 이벤트 발생
• 들어오는 인자(이벤트)를 변경 가능하게 하는 이벤트 발생 시키기
3. 원래 메서드 실행
• 원래의 메서드를 호출
4. 실행 후 이벤트 발생
• 원래의 메서드 실행 후 반환된 데이터를 외부에서 수정할 수 있도록 최종 이벤트를 발생시킴
5. 결과 반환
• 최종 결과 데이터를 반환하고 정상적인 실행이 이어지게 함
개체의 메서드를 이벤트 리스너처럼 사용하기
• 메서드와 어트리뷰트를 가지는 개체가 있을 때, 개체의 메서드
를 이벤트 처리기로 전달하기 위한 방법
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);
END