jQuery로 사용자 이벤트(event) 만들어 사용하기

- 출처 : http://stackoverflow.com/questions/2857900/onhide-type-event-in-jquery -

* 상황 설명

마치 onclick 이벤트처럼, '어떤 동작'을 수행할 때(특정 함수를 호출할 때) 특정 동작을 수행하게 하고 싶다.
그러나 그 동작이 jQuery에 built-in 된 이벤트가 아니기 때문에 bind() 를 사용할 수가 없다. 어떻게 해야 하는가?

* 방법 1

- 실제로 'hide' 이벤트는 존재하지 않지만, 마치 이벤트가 있는 것 같은 효과를 주기 위해서
jQuery의 hide() 함수를 오버라이딩 한다.

- hide() 함수 오버라이딩 코드

var _oldhide = $.fn.hide; //원래 hide() 함수 백업

$.fn.hide = function(speed, callback){

$(this).trigger('hide'); //'hide'라는 이벤트를 수행

return _oldhide.apply(this, arguments); //원래 hide() 함수 재사용

}

- 'hide' 이벤트 바인딩 코드

$('#saveBtn').bind('hide', function(){

alert('hide!');

});

# 방법 1을 확장하여 적용해 본 예제

- object에 property 셋팅시 이벤트를 주어 셋팅한 property의 변경전/후의 이름/값을 받아 사용하고 싶다.

//모든 object에 프로토타입 변수로 setVal을 선언한다.

//setVal 실행시 동시에 'set' 이라는 사용자정의 이벤트를 실행한다. ($obj.trigger())

//$obj.trigger() 실행시 파라미터(실행 전/후 프로퍼티정보)를 인수로 넘긴다.

Object.prototype.setVal = function(propName, val){

var arg = {before:[propName, this[propName]], after:[propName, val]};

$(this).trigger('set', arg); //'set' 이라는 사용자정의 이벤트를 실행

this[propName] = val; //setter의 원래 역할

}

//예제object

var objArr = [ {a:'123', b:'456', c:{x:'777', y:'888'}}, {a:'321', b:'654'} ];

//예제object에 'set' 사용자정의 이벤트를 바인딩한다.

$(objArr).bind('set', function(){

  //arguments[0] 의 정체는 잘 모르겠는데, 이벤트 당사자가 아닌가 싶다.

  //setVal 실행 전 프로퍼티정보

alert('before - '+arguments[1]['before'][0]+' : '+arguments[1]['before'][1]);

//setVal 실행 후 프로퍼티정보
alert('after - '+arguments[1]['after'][0] +' : '+arguments[1]['after'][1] );

});

//setVal() 함수를 호출하여 사용자정의 이벤트가 제대로 동작하는지 확인한다.

objArr[0].setVal('a', 'qqq');

- 참고링크 (tent 라이브러리 주목!)
http://stackoverflow.com/questions/4169524/javascript-property-change-event

* 방법 2

- input:text 계열 엘리먼트의 값이 변경될 때의 이벤트를 캐치하고 싶은데, 이벤트가 없다.
jQuery의 val() 함수를 오버라이딩하여 값이 변경되었을 때 특정 코드를 수행하게 하자.

- 위의 예시 1과 다른 점은, 예시 1은 새로운 이벤트를 만드는 것에 가까운 반면에,
예시 2는 함수의 호출과 특정 이벤트를 맵핑시키는 개념이라는 점이 다르다.

- val() 함수 오버라이딩 코드 (getter는 놔두고 setter만 오버라이딩 하는 것이 포인트!)

$.fn.custom_val = $.fn.val;

$.fn.val = function(value) {

if (null == value || undefined == value) { //settter만 건드림

return this.custom_val();

} else {

if (value == this.custom_val()) { //값이 바뀌었을 경우

return this

} else {

return this.custom_val(value).change();

}

- 이벤트 바인딩 코드 (:text, :hidden 등에는 원래 사용할 수 없는 onchage 이벤트 사용)

$('#inputBox1').change( function(){

alert('change!');

});