ext mon과 on의 차이

mon 및 on 메서드는 객체에 이벤트 핸들을 추가하는 메서드입니다.
1. on 방법은 실제addListener의 약자로 Ext.util에 있다.Observable에 정의된 역할은
"Appends an event handler to this object.",즉 현재 대상에 이벤트 처리 함수를 추가하는 것이다
코드는 아래와 같다(잘 이해하지 못하다)는 귀속 함수이다

        addListener : function(eventName, fn, scope, o){
            var me = this,
                e,
                oe,
                isF,
            ce;
            if (ISOBJECT(eventName)) {
                o = eventName;
                for (e in o){
                    oe = o[e];
                    if (!filterOptRe.test(e)) {
                        me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
                    }
                }
            } else {
                eventName = toLower(eventName);
                ce = me.events[eventName] || TRUE;
                if (typeof ce == "boolean") {
                    me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
                }
                ce.addListener(fn, scope, ISOBJECT(o) ? o : {});
            }
        },

2.mon 방법은 Ext3에서 메모리 유출 문제를 해결하기 위해 (무슨 문제인지 모르면 일부 핸들이 자동으로 삭제되지 않을 수도 있음) 개선한 것으로Component류에 정의되어 현재 대상에 외부 대상에 추가된 이벤트 핸들이 현재 대상이 삭제될 때 자동으로 핸들을 제거합니다.코드는 다음과 같습니다.

    mon : function(item, ename, fn, scope, opt){
        if(!this.mons){
            this.mons = [];
            this.on('beforedestroy', this.clearMons, this, {single: true});
        }

        if(Ext.isObject(ename)){
        	var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;

            var o = ename;
            for(var e in o){
                if(propRe.test(e)){
                    continue;
                }
                if(Ext.isFunction(o[e])){
                    // shared options
			        this.mons.push({
			            item: item, ename: e, fn: o[e], scope: o.scope
			        });
			        item.on(e, o[e], o.scope, o);
                }else{
                    // individual options
			        this.mons.push({
			            item: item, ename: e, fn: o[e], scope: o.scope
			        });
			        item.on(e, o[e]);
                }
            }
            return;
        }


        this.mons.push({
            item: item, ename: ename, fn: fn, scope: scope
        });
        item.on(ename, fn, scope, opt);
    },

코드에서 현재 대상이 템플릿 방법인 beforedestroy에서 자동으로 핸들 정리 작업을 진행하여 메모리 유출을 줄이는 것을 똑똑히 볼 수 있다.
Ext 공식적으로 모든 componet 클래스에 핸들을 추가할 때 몬 대체 on을 사용하도록 추천합니다
인용하다
//Old Style
this.el.on('click', this.onClick, this);
//New Style
this.mon(this.el, 'click', this.onClick, this);