From Learn About the Ext JavaScript Library

이벤트 핸들링(handling events)은 Javascript에서 자주 다루는 것 중의 하나이다. 이벤트를 정상적으로 처리하는 Cross-browser간의 차이로 인해 이를 처리하는 것은 꽤 어려울 수 있다. 그러나 ExtJS는 보다 쉽고 가끔은 재미있게(!) 이벤트를 핸들링한다.

Contents 1 Very basic example 2 Scope of the handler function 3 Passed arguments 4 Using the event 5 Event options 6 Custom arguments 7 Attaching multiple handlers 8 Conclusion

Very basic example

사용자가 링크를 클릭할 때 사용자들에게 메세지를 보여주고자 하는 예를 떠올려보자. 이 예제를 확인하고 계속 진행하자. 왜냐하면 이벤트를 처리하기 전에 여러분들은 몇가지 사항들을 더 알고 싶어할 것이기 때문이다.

var el = Ext.get('somelink');
el.on('click', function(){
    alert('you click on a link');
});

여기에서 사용되는 익명의 핸들러 함수에 주목하자. (Ext.onReady()를 사용하여) 또한, 우리가 알고 있어야 하는 중요한 점은 이 코드가 DOM이 초기화된 이후에 실행되어야 한다는 것이다.

Scope of the handler function

자, 이제 막 이벤트 핸들링에 대한 가장 기본적인 것을 배웠으므로 우리가 할 수 있는 몇가지 사항들을 더 살펴보자. 핸들러 함수의 범위는 기본적으로 이벤트와 바인딩된 HTML element이다. 그래서, 범위 내에서 this 키워드가 언제든지 사용되면 이는 항상 HTML 엘리먼트에 적용된다.

var el = Ext.get('somelink');
el.on('click', function(){
    alert(this.id); // this will alert 'somelink'
});

그러나 핸들러의 범위를 다른 것으로 변경하고자 한다면 어떻게 해야 하나? 우리는 변경하고자 하는 객체를 scope argument로 전달할 수 있다.

onClick = function(){
    alert(this.someProperty); // this will alert 'someValue'
};
 
var scope = {
    someProperty : 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, scope);

주의: 범위(scope)에 관한 정보가 더 필요하다면 여기를 클릭

Passed arguments

이전 예에서, 핸들러 함수 범위를 변경하는 방법을 배웠다. 그러나, 여전히 엘리먼트에 접근하고자 한다면 어떻게 해야 하나. 우리는 이를 수행하는 핸들러 함수에 인자들을 전달하여 이를 수행할 수 있다.

onClick = function(ev, target){
    alert(this.someProperty); // this will alert 'someValue'
    alert(target.id); // this will alert 'somelink'
};
 
var scope = {
    someProperty : 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, scope);

이 예제에서는 두번째 인자(target)를 사용했다. 첫번째 인자는 Ext 이벤트 객체이다. 이 객체는 다양하게 사용될 수 있다.

Using the event

이벤트 핸들러에 전달된 Ext 이벤트 객체는 편리한 많은 속성과 메서드를 가지고 있다. 몇 가지 예제가 여기에 있다 :

onClick = function(ev, target){
    ev.preventDefault(); // Prevents the browsers default handling of the event
    ev.stopPropagation(); // Cancels bubbling of the event
    ev.stopEvent() // preventDefault + stopPropagation
 
    var target = ev.getTarget() // Gets the target of the event (same as the argument)
    var relTarget = ev.getRelatedTarget(); // Gets the related target
};

Ext EventObject로 할 수 있는 보다 많은 정보를 원한다면 도큐먼트를 확인하라.

Event options

이벤트는 많은 환경 옵션들을 가지고 있다. 몇가지 예를 보자 :

Delayed Listeners (delayed event firing)

el.on('click', this.onClick, this, {delay: 250});

Buffered Listeners (buffers an event so it only fires once in the defined interval)

el.on('click', this.onClick, this, {buffer: 100});

"Handler" Listeners (prevents default and optionally stops propagation)

// prevent default
el.on('click', this.onClick, this, {preventDefault: true});
 
// only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});
 
// prevent default and stop propagation
el.on('click', this.onClick, this, {stopEvent: true});

Other options

el.on('click', this.onClick, this, {
    single: true, // removed automatically after the first fire:
    delegate: 'li.some-class' // Automatic event delegation!
});

Custom arguments

또한, Custom arguments를 이벤트 핸들러에 전달할 수 있다. 범위를 변경하지 않거나, 범위를 범위 오브젝트에 추가하지 않거나, 또는 클로져를 사용하지 않고 다양한 내부 핸들러를 사용하고자 하는 경우에 유용하다.

function onClick(ev, target, options){
   alert(options.someProperty); // alerts 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});

Attaching multiple handlers

하나의 엘리먼트에 여러개의 핸들러를 붙이고 싶다면 하나의 호출 함수 내에서 아래와 같이 할 수 있다.

el.on({
    'click' : {
    	fn: this.onClick,
	scope: this,
	delay: 100
    }, 
    'mouseover' : {
    	fn: this.onMouseOver,
	scope: this
    },
    'mouseout' : {
    	fn: this.onMouseOut,
        scope: this
    }
});

Conclusion

앞서 보았듯이, Ext는 이벤트를 처리할 때 쉽게 사용할 수 있는 많은 기능을 제공한다. 여기서는 기본적인 내용만 다뤘지만 좀더 많은 정보를 원하면 Jack Slocum의 포럼에서 확인하자.