ExtJs的事件机制Event(学员总结)

一、事件的三种绑定方式

1、HTML/DHTML

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

[javascript] view plaincopy

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

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

[javascript] view plaincopy

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

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

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

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

});

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

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

事件的分类：

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

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

一个自定义事件的例子：

没有用到事件处理的场景

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

<--孩子

饿了--->给一瓶牛奶

不饿--->不给

用到事件的场景

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

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

感觉不饿就不喝

角色功能分析

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

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

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

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

[plain] view plaincopy

1. Ext.define("children",{
2. extend:"Ext.util.Observable",
3. //定义构造函数
4. constructor:function(){
5. this.state="hungry",
6. this.setMilk=function(milk){
7. //调用事件的动作
8. this.fireEvent("hungry",milk);
9. },
10. //添加一个事件
11. this.addEvents({"hungry":true}),
12. //注册这个事件
13. this.addListener("hungry",function(milk){
14. if(this.state=="hungry"){
15. this.drink(milk);
16. }else{
17. alert("我不饿");
18. }
19. }),
20. //定义喝牛奶的方法
21. this.drink=function(milk){
22. alert("我喝掉了一瓶牛奶："+milk);
23. }
24. }
25. });
26. var children=Ext.create("children",{});//本对象是牛奶过敏的对象
27. //事件的拦截
28. Ext.util.Observable.capture(children,function(eventName){
29. if(eventName=="hungry"){
30. alert("这个孩子对牛奶过敏，不能喝");
31. return false;
32. }else{
33. return true;
34. }
35. });
36. children.setMilk("三鹿牛奶");
37. /*
38. * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发这个事件的动作fireEvent
39. * */

三、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. renderTo:Ext.getBody(),
3. width:400,
4. items:[
5. {xtype:"button",id:"create",text:"create"},
6. {xtype:"button",id:"delete",text:"delete"},
7. {xtype:"button",text:"撤销删除按钮",handler:function(){
8. var c=Ext.getCmp("delete");
9. if(c){
10. c.destroy();
11. }
12. }}
13. ]
14. });
15. var deleteB=Ext.getCmp("delete");
16. deleteB.addManagedListener(Ext.getCmp("create"),"click",function(){
17. alert("添加操作");
18. });

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

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

[plain] view plaincopy

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

五、事件对象Ext.EventObject

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

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

[plain] view plaincopy

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

六、事件管理器Ext.EventManager

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

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

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

});