为底层元素注册监听器

为底层元素注册监听器

例5.18

代码：

   

       

       

       

       

 

       

   

   

    按钮

   

Ext.onReady(function(){

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

        alert("按钮被点击");

    })

})

 

 

解析：

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

 

 

 

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

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.Element，Ext为DOM节点扩展了一系列的工具函数。同时，我们知道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://blog.chinaunix.net/space.php?uid=13164110&do=blog&id=3060643