ExtJS DOM操作-Element类 事件处理

更新记录
2022年7月18日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

DOM操作-自身操作-事件

添加事件

element.on ( eventName, [fn], [scope], [options], [order] ) : Object
element.addListener ( eventName, [fn], [scope], [options], [order] ): Object
注意：on()方法是addListener()方法的别名
https://docs.sencha.com/extjs/7.3.1/modern/Ext.dom.Element.html#method-on

实例：
绑定事件

myGridPanel.on("itemclick", this.onItemClick, this);

绑定多个事件

myGridPanel.on({
    cellclick: this.onCellClick,
    select: this.onSelect,
    viewready: this.onViewReady,
    scope: this // Important. Ensure "this" is correct during handler execution
});

绑定多个事件（参数式）

myGridPanel.on({
    cellclick: {fn: this.onCellClick, scope: this, single: true},
    viewready: {fn: panel.onViewReady, scope: panel}
});

绑定多个事件（参数式）（字符串式事件名）

myGridPanel.on({
    cellclick: {fn: 'onCellClick', scope: this, single: true},
    viewready: {fn: 'onViewReady', scope: panel}
});

添加事件(事前)

element.onBefore ( eventName, fn, [scope], [options] ) 
element.addBeforeListener  ( eventName, fn, [scope], [options] ) 

注意：addBeforeListener()方法是onBefore()方法的快捷别名

移除事件(事前)

element.removeBeforeListener  ( eventName, fn, [scope], [options] ) 
element.unBefore ( eventName, fn, [scope], [options] ) 

添加事件(事后)

element.onAfter ( eventName, fn, [scope], [options] ) 
element.addAfterListener ( eventName, fn, [scope], [options] ) 

注意：addAfterListener()是onAfter()方法的快捷别名

移除事件(事后)

element.unAfter ( eventName, fn, [scope], [options] ) 
element.removeAfterListener  ( eventName, fn, [scope], [options] ) 

清除所有事件

element.clearListeners()

检测是否监听指定事件

element.hasListener ( eventName ) : Boolean   

触发事件1

element.fireEvent ( eventName, args ) : Boolean 

注意：args 类型为Object..

触发事件2

element.fireEventArgs ( eventName, args ) : Boolean 

注意：args 类型为Object[]

触发事件并指定监听函数

element.fireEventedAction ( eventName, args, fn, [scope], [fnArgs] ) : Boolean 

获得焦点

element.focus ( [defer] ) : Ext.dom.Element

失去焦点

element.blur() Ext.dom.Element

快速绑定hover

element.hover ( overFn, outFn, [scope], [options] ) : Ext.dom.Element

允许事件冒泡

element.enableBubble ( eventNames )

检测是否已挂起所有事件或特定事件

element.isSuspended ( [event] ) : Boolean

暂停和恢复事件

element.resumeEvent ( eventName )
element.suspendEvent ( eventName )
element.resumeEvents ( [discardQueue] )
element.suspendEvents ( queueSuspended )