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