ExtJS-事件管理-监听DOM事件

更新记录

更新记录

2022年12月3日 更新事件委托。
2022年7月24日 发布。
2022年7月16日 从笔记迁移到博客。

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

监听DOM事件#

说明#

默认监听的都是组件事件，所以如果想监听DOM事件
使用Ext.dom.Element 类型的on()方法
和jQuery基本是类似的

实例：监听click事件#

//HTML代码
<div id="mydiv"></div>
//JavaScript代码
var div = Ext.get('mydiv');
div.on('click', function(e, t, eOpts) {
    // Do something
});

实例：监听tap事件#

var el = this.getView().getEl();
el.on('tap', function() {
    console.log('The Viewport was tapped/clicked.');
});

实例：用DOM事件触发组件事件#

在DOM事件中触发组件事件即可

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    html: 'Click Me!',
    listeners: {
        click: function(){
            Ext.Msg.alert('Success!', 'I have been clicked!')  
        }
    }
});

//监听DOM元素的Native事件
container.el.on('click', function(){ 
    //触发ExtJS组件事件
    this.fireEvent('click', container); 
}, container);

快捷事件绑定Ext.addBehaviors#

说明：通过选择器将事件侦听器应用于元素
注意：事件名称用@指定

Ext.addBehaviors ( obj ) 

实例：

Ext.addBehaviors({
    // 添加点击事件到元素上
    '#app-main-1009_header-innerCt@click': function(e, t){
        console.log('Click');
    },

    //添加多个元素到同一个事件上
    '#mainlist-1012_header-title-textEl, #gridcolumn-1015-textInnerEl@mouseover': function(){
        console.log('Mulit Mouseover');
    }
});

事件代理（Event delegation）#

Event delegation is a technique where a single event handler is created on a parent element, which leverages the fact that the browser will bubble any events raised on one of its children to this parent element
If the target of the original event matches the delegate’s selector, then it will execute the event handler; otherwise nothing will happen

事件委托#

whatsNewEl.on('click', function(e, target, options){
   alert(target.innerHTML);
}, this, {
   delegate: 'li'
});

支持的配置项

stopEvent
- preventDefault
- stopPropagation
- delay
- buffer

事件规范化（转换）#

事件规范化是允许Ext JS 5+应用程序在触摸屏设备上运行的关键
这种规范化发生在后台，是从标准鼠标事件到其等效的触摸和指针事件的简单转换
默认的指针事件是w3c标准，用于处理针对屏幕上特定坐标集的事件，而不考虑输入设备（鼠标、触摸笔、手写笔等）

ExtJS会将事件进行对具体设备进行转换，这种转换是自动的
比如你设置监听mousedown事件

myElement.on('mousedown', someFunction);

在移动触碰设备上会自动转换为'touchstart事件

myElement.on('touchstart', someFunction);

如果设备支持指针事件，则转为pointerdown

myElement.on('pointerdown', someFunction);

如果不想使用ExtJS提供的自动转换，可以设置禁止自动转换

myElement.on({
    mousedown: someFunction,
    // only listen to mousedown.  Do not call the handler in response to touchstart or pointerdown.
    translate: false
});