ExtJs的事件机制Event

ExtJs的事件机制Event

一、事件的三种绑定方式

       1、HTML/DHTML

              在标签中直接增加属性触发事件    

[javascript] view plaincopy

1. <script type="text/javascript">  
2.   
3.             function hello(){  
4.   
5.                    alert("hello word");  
6.   
7.             }</script>  
8.   
9.             <input type="button" id="btn1" value="第一种事件绑定" onClick="hello()">  

       2、DOM Ext.isIE判断是否是IE浏览器利用document对象获取元素对象并绑定事件      

[javascript] view plaincopy

1. if(Ext.isIE){  
2.   
3.                     document.getElementById("btn2").attachEvent("onclick",function(){  
4.   
5.                            alert("第二种事件绑定方式");  
6.   
7.                     });  
8.   
9.              }else{  
10.   
11.                     document.getElementById("btn2").addEventListener("click",function(){  
12.   
13.                            alert("第二种事件绑定方式");  
14.   
15.                     });  
16.   
17.              }  

       3、ExtJs  利用Ext中的get方式获取元素并调用on方法绑定事件，第一个参数传入为事件类型，第二个是动作

              Ext.get("btn3").on("click",function(){

                     alert("第三种事件绑定方式");

              });

二、Ext.util.Observable 事件的基类

       概述：它为所有支持事件机制的extjs组件提供事件的支持，如果我们自己创建新的组件需要有事件的支持那么我们就得继承它

       事件的分类：

              标准事件：键盘按钮按下，鼠标的单机双击，滑过滑动

              业务时间：当面盘首期的时候触发，当组件被销毁的时候触发，当每个对象的属性值不为空的时候触发

       一个自定义事件的例子：

              没有用到事件处理的场景

              母亲为孩子饿不饿--->

                     <--孩子

                            饿了--->给一瓶牛奶

                            不饿--->不给

              用到事件的场景

              母亲给孩子一瓶牛奶-->

                            孩子拿到牛奶感觉饿了就喝

                            感觉不饿就不喝

              角色功能分析

                     孩子：应该有自己能拿到牛奶判断饿不饿的方法，当母亲给他牛奶的时候调用这个方法

                     那么孩子就要有一个业务事件时刻监听着母亲什么时候给自己牛奶

                     母亲：调用孩子拿牛奶的方法，并且传入一瓶牛奶

       代码实现：并测试事件拦截

           

[plain] view plaincopy

1. Ext.define("children",{  
2.   
3.                   extend:"Ext.util.Observable",  
4.   
5.                   //定义构造函数              
6.   
7.                   constructor:function(){  
8.   
9.                          this.state="hungry",  
10.   
11.                          this.setMilk=function(milk){  
12.   
13.                                 //调用事件的动作  
14.   
15.                                 this.fireEvent("hungry",milk);  
16.   
17.                          },  
18.   
19.                          //添加一个事件  
20.   
21.                          this.addEvents({"hungry":true}),  
22.   
23.                          //注册这个事件  
24.   
25.                          this.addListener("hungry",function(milk){  
26.   
27.                                 if(this.state=="hungry"){  
28.   
29.                                        this.drink(milk);  
30.   
31.                                 }else{  
32.   
33.                                        alert("我不饿");  
34.   
35.                                 }  
36.   
37.                          }),  
38.   
39.                          //定义喝牛奶的方法  
40.   
41.                          this.drink=function(milk){  
42.   
43.                                 alert("我喝掉了一瓶牛奶："+milk);  
44.   
45.                          }  
46.   
47.                   }       
48.   
49.            });  
50.   
51.            var children=Ext.create("children",{});//本对象是牛奶过敏的对象  
52.   
53.            //事件的拦截  
54.   
55.            Ext.util.Observable.capture(children,function(eventName){  
56.   
57.                   if(eventName=="hungry"){  
58.   
59.                          alert("这个孩子对牛奶过敏，不能喝");  
60.   
61.                          return false;  
62.   
63.                   }else{  
64.   
65.                          return true;       
66.   
67.                   }  
68.   
69.            });  
70.   
71.            children.setMilk("三鹿牛奶");  
72.   
73.            /*  
74.   
75.             * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发这个事件的动作fireEvent  
76.   
77.             * */  

三、addManagedListener 受管制的监听

       概述：它是由调用的组件管理的，当组件执行了销毁的命令的时候所有被组件管制的事件全部销毁

       创建工具条，利用items属性添加三个按钮create delete 撤销删除按钮

       利用button中的handler点击事件来执行动作。调用destroy方法撤销delete按钮(在HTML中的id用get方法获取，而在组件指定的id需要用getCmp方法来获取)      

       在delete按钮中添加受管理的组件的事件机制。addManagedListener方法来添加

              参数：第一个指定的是组件   第二个是事件类型   第三个是此事件的动作

       流程：点击create按钮指定动作。在点击撤销删除按钮的时候将delete按钮删除，并且它管理的事件全部销毁，这时点击create无效果

            

[plain] view plaincopy

1. var tbar=Ext.create("Ext.toolbar.Toolbar",{  
2.   
3.                    renderTo:Ext.getBody(),  
4.   
5.                    width:400,  
6.   
7.                    items:[  
8.   
9.                           {xtype:"button",id:"create",text:"create"},  
10.   
11.                           {xtype:"button",id:"delete",text:"delete"},  
12.   
13.                           {xtype:"button",text:"撤销删除按钮",handler:function(){  
14.   
15.                                  var c=Ext.getCmp("delete");  
16.   
17.                                  if(c){  
18.   
19.                                         c.destroy();  
20.   
21.                                  }  
22.   
23.                           }}  
24.   
25.                    ]  
26.   
27.             });     
28.   
29.             var deleteB=Ext.getCmp("delete");  
30.   
31.             deleteB.addManagedListener(Ext.getCmp("create"),"click",function(){  
32.   
33.                    alert("添加操作");  
34.   
35.             });     

四、relayEvents 事件的分发和传播(控制实现事件在不同空间或对象对内的传播)

       比如说孩子喝完三鹿去医院，老爸就要带他去医院

             

[plain] view plaincopy

1. //定义father类  
2.   
3.              Ext.define("father",{  
4.   
5.                     extend:"Ext.util.Observable",  
6.   
7.                     constructor:function(config){  
8.   
9.                            this.listeners=config.listeners;  
10.   
11.                            this.superclass.constructor.call(this,config);  
12.   
13.                     }  
14.   
15.              });  
16.   
17.              var father=Ext.create("father",{});  
18.   
19.              //将孩子的事件机制分发到自身中  
20.   
21.              father.relayEvents(children,["hungry"]);  
22.   
23.              //注册分发过来的事件监听  
24.   
25.              father.on("hungry",function(){  
26.   
27.                     alert("送喝了三鹿牛奶的孩子去医院..");  
28.   
29.              });  
30.   
31.              children.setMilk("三鹿牛奶");  

五、事件对象Ext.EventObject

    概述：当你添加事件的时候会传入一个Ext.EventObject对象的参数，不是一个单例，

       不能被直接new出来，他会存活在事件处理的函数中

[plain] view plaincopy

1. var c=Ext.get("btn4");  
2.   
3.       c.on("click",function(e){  
4.   
5.              alert(e);  
6.   
7.              //获取单机的时候的坐标值  可以正确的获取到如果触发的事件一些参数  
8.   
9.              alert(e.getPageX());  
10.   
11.       });  

六、事件管理器Ext.EventManager

     概述：它可以更方便的为页面元素绑定事件处理函数，方法：addListener 为元素增减事件

       Ext.EventManager.addListener("btn5","click",function(){

              alert("通过事件管理器来进行事件注册监听");

       });