ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 为底层元素注册监听器

为底层元素注册监听器

原创 Linux操作系统 作者:broadviewbj 时间:2012-02-10 09:44:44 0 删除 编辑

为底层元素注册监听器

5.18

代码:

   

       

        </font></font></span><span style='font-family: 宋体; mso-ascii-font-family: "Courier New"; mso-hansi-font-family: "Courier New";'>为底层元素注册事件</span><span lang="EN-US"><font face="Courier New">

        <!--导入Ext,这里省略-->

       

 

       

   

   

   

   

Ext.onReady(function(){

    Ext.EventManager.on('myBtn','click',function(e){

        alert("按钮被点击");

    })

})

 

 

解析:

使用Ext.EventManagerbutton标签添加点击监听,这种方式在第1节的例子中已经做过初步解析。在第1节的例子中我们自己手动封装了一个EventManager对底层元素的事件进行处理,这里的接口和我们自定义的非常相像。这种调用方式实在很无趣,来看Ext还为EventManager提供了哪些特性,如图5-38所示。

 

 

 

这个统一接口on除了提供了使用频率非常高的前3个参数之外,还提供了scopeoptions两个备用参数。这两个是我们自己封装事件工具时所没有考虑到的,来观摩一下它们的用法。

scope这个参数我们再熟悉不过了,这是用来配置监听函数中this所指向对象的。修改一下以上代码:

Ext.EventManager.on('myBtn','click',function(e){

    alert(this);

})

 

 

 

默认就是触发事件的Button按钮。再手工指定一个不同的对象:

Ext.EventManager.on('myBtn','click',function(e){

    alert(Ext.encode(this));

},{name:"漠漠",age:25})

 

 

显然,第3个参数可以指定为任意对象。如果传递了scope这个参数,监听函数里面的this到底指向谁,开发者自己必须清楚。

再来看第4个可选的配置参数,如图5-41所示。

 

 

 

一共可以支持10个配置选项,其中带下画线的5个比较常用。

在第2章对DOM操作的分析中我们知道,Ext.Element这个类是对底层DOM节点的封装,通过Ext.ElementExtDOM节点扩展了一系列的工具函数。同时,我们知道Ext中的那些丰富的UI界面,其实质就是一层一层的DIV嵌套而已。由于Ext需要频繁地操纵这些底层的标签,因此在源码中,Ext更偏向于使用自己封装的Ext.Element来操纵底层元素,而不是直接面对这些原生HTML标签。

对于事件机制,Ext同样坚持了这种原则。Ext的实现代码中一般不会直接使用EventManger为底层标签注册事件监听函数,而是通过Ext.Element间接地进行,尤其是在构建复杂UI组件,例如Ext.Panel的时候。在Ext.Element的源码中,你会发现如图5-42所示的惊喜。

 

 

 

Ext.Element自己并没有做什么实际的工作,它把所有事情都悄悄地交给EventManger去完成,自己只是坐享其成而已。这是一种最简单的“代理模式”。

 

 

——本段文字节选自《EXT江湖》

图书详细信息:http://space.itpub.net/13164110/viewspace-715125

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

Ext江湖.jpg

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/13164110/viewspace-716000/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-02-22

  • 博文量
    1031
  • 访问量
    1599073