`
zhouyrt
  • 浏览: 1162558 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读Ext之九(事件管理)

阅读更多

Ext的事件管理非常强大。主要定义在Ext.EventManager对象(单例模式 )中。该对象有以下方法

addListener
removeListener
removeAll
getListeners
purgeElement
_unload
onDocumentReady
on
un
stoppedMouseDownEvent


on / un 是 addListener / removeListener的快捷方式 。
stoppedMouseDownEvent 是  Ext.util.Event 类的实例对象,这个类定义在Observable.js中。
stoppedMouseDownEvent 在Ext.EventObject 类中用到。

使用Ext.EventManager.on添加事件很简单

 

<p id="p1" style="background:gold;">
	HELLO
</p>

<script type="text/javascript">
	var p1 = document.getElementById('p1');
	function f1(){alert(this)}
	Ext.EventManager.on(p1,'click',f1);	
</script>

 

这样就为段落P添加了一个单击事件。默认情况下执行上下文就是HtmlElement自身。当然可以使用第四个参数scope指定上下文。

 

<script type="text/javascript">
	var p1 = document.getElementById('p1');
	function f1(){alert(this)}
	Ext.EventManager.on(p1,'click',f1,window);	
</script>

 

第五个参数是个对象,属性介绍分别如下:
scope : 可指定执行上下文
delegate :事件代理
stopEvent :阻止冒泡和默认行为
preventDefault :阻止默认行为
stopPropagation :停止事件冒泡
normalized : 仅传原生事件对象
delay :延迟执行
single : 仅执行一次
buffer :延迟执行,多次时最后一次覆盖前一次
target : 指定在父元素上执行

 

下图是Ext.EventManager.addListener的详细接口说明

 

 

 

下面看看源码是如何实现的

 

addListener : function(element, eventName, fn, scope, options){
    if(Ext.isObject(eventName)){
        var o = eventName, e, val;
        for(e in o){
            val = o[e];
            if(!propRe.test(e)){
                if(Ext.isFunction(val)){
                    // shared options
                    listen(element, e, o, val, o.scope);
                }else{
                    // individual options
                    listen(element, e, val);
                }
            }
        }
    } else {
        listen(element, eventName, options, fn, scope);
    }
},
 

可以看到其中调用私有 listen 函数,但存在三种分支情况。暂且考虑第三者情况listen(element, eventName, options, fn, scope);

listen 函数定义如下

 

function listen(element, ename, opt, fn, scope){
    var o = !Ext.isObject(opt) ? {} : opt,
        el = Ext.getDom(element), task;

    fn = fn || o.fn;
    scope = scope || o.scope;

    if(!el){
        throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
    }
    function h(e){
        // prevent errors while unload occurring
        if(!Ext){// !window[xname]){  ==> can't we do this?
            return;
        }
        e = Ext.EventObject.setEvent(e);
        var t;
        if (o.delegate) {
            if(!(t = e.getTarget(o.delegate, el))){
                return;
            }
        } else {
            t = e.target;
        }
        if (o.stopEvent) {
            e.stopEvent();
        }
        if (o.preventDefault) {
           e.preventDefault();
        }
        if (o.stopPropagation) {
            e.stopPropagation();
        }
        if (o.normalized) {
            e = e.browserEvent;
        }

        fn.call(scope || el, e, t, o);
    };
    if(o.target){
        h = createTargeted(h, o);
    }
    if(o.delay){
        h = createDelayed(h, o, fn);
    }
    if(o.single){
        h = createSingle(h, el, ename, fn, scope);
    }
    if(o.buffer){
        task = new Ext.util.DelayedTask(h);
        h = createBuffered(h, o, task);
    }

    addListener(el, ename, fn, task, h, scope);
    return h;
};

 

比较长,执行流程如下

1,options参数未传,使用空对象{}。(接口的第5个参数)
2,通过Ext.getDom获取HTMLElement元素(接口的第1个参数)。
3, 响应函数先取fn(接口的第3个参数),没传则取opt.fn上。
4, 执行上下文先取scope(接口的第4个参数),没有则取opt.scope。
5,el不存在,抛异常
6, 内部函数h包装了客户端传入的函数fn,将原生事件对象偷偷转换成Ext包装后的事件对象Ext.EventObject。依次根据所传opt参数进行对应的操作。最后一句是核心

fn.call(scope || el, e, t, o);


响应函数fn真正的执行。

7, 根据opt参数进行对应的操作:o.target,o.delay,o.single和o.buffer。
8, 调用私有的addListener函数。

私有的addListener定义如下:

 

/// There is some jquery work around stuff here that isn't needed in Ext Core.
function addListener(el, ename, fn, task, wrap, scope){
    el = Ext.getDom(el);
    var id = getId(el),
        es = Ext.elCache[id].events,
        wfn;
    wfn = E.on(el, ename, wrap);
    es[ename] = es[ename] || [];

    /* 0 = Original Function,
       1 = Event Manager Wrapped Function,
       2 = Scope,
       3 = Adapter Wrapped Function,
       4 = Buffered Task
    */
    es[ename].push([fn, wrap, scope, wfn, task]);


    // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
    // without breaking ExtJS.
    if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
        var args = ["DOMMouseScroll", wrap, false];
        el.addEventListener.apply(el, args);
        Ext.EventManager.addListener(WINDOW, 'unload', function(){
            el.removeEventListener.apply(el, args);
        });
    }
    if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
        Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
    }
};

 

 

该函数中最重要一句

wfn = E.on(el, ename, wrap);

 


E.on 是 Ext.lib.Event.on,即 第四篇 提到的事件的低级封装。

此外将返回对象wfn存在数组中。

整个Ext添加事件的调用流程就是如此..

 

  • 大小: 42.7 KB
3
0
分享到:
评论

相关推荐

    读Ext之十三(Ext元素)

    标题“读Ext之十三(Ext元素)”暗示我们将关注Ext.js中的元素操作,这是构建用户界面的基础。Element是Ext.js中的一个核心类,它封装了DOM元素的操作,提供了大量便捷的方法来处理样式、事件、动画等。 描述中提到...

    读Ext之十(解析JSON)

    在深入探讨“读Ext之十(解析JSON)”这一主题之前,我们首先需要理解什么是JSON。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,设计简单且易于人阅读和编写,同时...

    Windows读取Ext4分区的工具 Ext2Read

    Linux最常用的文件系统类型之一就是EXT系列,包括EXT2、EXT3和EXT4。然而,Windows操作系统默认并不支持直接读取这些格式的分区。这时,就需要借助第三方工具来实现这一目标,例如“Windows读取Ext4分区的工具”——...

    读Ext之六(延迟任务的执行)

    总结起来,`DelayedTask.js`是Ext框架中处理延迟执行任务的关键工具,它通过封装异步机制提供了一种简单易用的方式来管理延迟执行的代码。无论是优化用户体验,还是在复杂的逻辑中控制任务调度,`DelayedTask`都是一...

    在windows下使用Ext2Fsd访问EXT4分区

    但有一些第三方工具可以帮助我们解决这个问题,其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件,专门设计用于Windows系统上读/写Linux的EXT2、EXT3和EXT4文件系统。 **Ext2Fsd的主要功能:** 1. **读写支持**...

    ext4读文件流程分析

    `ext4`作为Linux系统中最常用的文件系统之一,其读取流程也遵循这一框架。 ##### sys_read() `sys_read()`是Linux内核中处理用户空间进程发起的读取操作的主要入口点。该函数的主要职责是获取文件描述符对应的文件...

    ext 包+教程

    4. **权限管理**:EXT3遵循Unix的权限模型,包括读、写和执行权限,以及用户、组和其他用户的权限设置。 二、EXT3的安装与挂载 在Linux中,安装EXT3文件系统通常是在创建新分区时进行。通过`fdisk`命令创建分区,...

    ext2.0官方文档

    6. **文件权限与所有权**:EXT2.0遵循Unix的权限模型,支持用户、用户组以及其他人三种权限,以及读、写和执行操作。 7. **软链接和硬链接**:EXT2.0支持软链接(符号链接)和硬链接,前者是一个指向另一个文件的...

    EXT3.0中文文档

    EXT3.0中文文档是针对Linux操作系统中EXT3文件系统的详尽指南,它为开发者和系统管理员提供了关于这个成熟且广泛使用的文件系统的重要信息。EXT3(Third Extended File System)是Linux内核的一个日志式文件系统,由...

    EXT2.0最新压缩包

    9. **权限和访问控制**:EXT2.0遵循Unix的权限模型,包括用户、组和其他用户的读、写、执行权限。 然而,EXT2.0也有其局限性,比如缺乏日志记录可能导致系统崩溃后的数据丢失,以及在多用户环境下的性能问题。随着...

    ext2 项目完整的权限管理

    在EXT2中,权限管理是基于Unix式的权限模型,包括读、写和执行三种基本权限,以及用户类别:所有者、用户组和其他用户。每个文件和目录都有这些权限设置,允许管理员精确控制文件和目录的访问。在EXT2中,你可以通过...

    EXT3.0 中文API

    6. **文件权限与访问控制**:EXT3遵循UNIX的权限模型,包括读、写、执行权限以及用户、组和其他用户的访问控制。同时,EXT3还支持ACL(Access Control List)来实现更精细的访问控制。 7. **文件系统检查与修复**:...

    ext2.3 官方包 2.2中文手册

    EXT2.3是Linux操作系统中广泛使用的文件系统之一,它由Erich Boleyn和Hans Reiser在1992年开发,是EXT2(第二扩展文件系统)的改进版本,后续发展为EXT3(第三扩展文件系统)。EXT2.3官方包2.2中文手册提供了关于该...

    20个ext2皮肤样式

    6. **文件权限**:EXT2遵循Unix的权限模型,每个文件都有属主、属组和其它用户的读、写和执行权限。 7. **文件链接**:EXT2支持硬链接和符号链接。硬链接允许多个文件名指向同一个inode,而符号链接则创建了一个...

    Ext2Fsd-0.51

    - **文件权限管理**:尽管Windows系统没有原生的Linux权限系统,但Ext2Fsd尝试模拟Linux的权限模型,让用户可以处理文件和目录的读、写、执行权限。 - **日志文件系统支持**:除了基本的Ext2和Ext3,Ext2Fsd也支持...

    Ext资料 Ext中文手册 Ext明教程 等

    3. **布局管理**:Ext提供了多种布局方式,如fit布局、border布局、form布局等,适应不同场景下的页面结构需求,让开发者能轻松地组织和排列组件。 4. **MVC模式**:Ext支持Model-View-Controller(MVC)设计模式,...

    ext 3.1.1 API and spket

    API文档(如压缩包中的Ext3.0英文API.CHM)是开发者理解和使用Ext的关键资源,它详尽地解释了每个类、方法、事件和配置选项,帮助开发者快速上手并解决编程问题。 Spket则是一个集成开发环境(Integrated ...

    EXT3.0 CHM

    5. **权限管理**:EXT3遵循Linux的权限模型,支持用户、组和其他用户的读、写和执行权限,提供了良好的安全性。 6. **文件系统挂载选项**:EXT3提供了多种挂载选项,如data=journal(所有数据都通过日志记录)、...

    ext2.1 api

    - UNIX权限模型:EXT2遵循UNIX的用户、组和其他用户的读、写、执行权限。 - ACLs(Access Control Lists):EXT2不直接支持ACLs,但可以通过额外的模块添加支持。 6. **扩展性与局限性** - 相比后来的EXT3和EXT4...

    Ext3.3.1Ext3.3.1

    5. **权限管理**:遵循Unix的用户和组权限模型,提供读、写、执行等访问控制。 在升级到Ext3.3.1这样的新版本时,用户可能会期望获得以下改进: - **错误修复**:解决已知的bug,提高系统的稳定性。 - **性能提升**...

Global site tag (gtag.js) - Google Analytics