ExtJs的事件机制Event

本文详细介绍了ExtJS框架中的事件绑定方法,包括HTML/DHTML、DOM扩展和ExtJs API三种方式。探讨了Ext.util.Observable作为事件基类的作用,并通过实例展示了自定义事件的创建过程。此外,还讲解了受管制监听、事件分发与传播、事件对象以及事件管理器等高级主题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


一、事件的三种绑定方式

       1、HTML/DHTML

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

              <scripttype="text/javascript">

              functionhello(){

                     alert("helloword");

              }</script>

              <inputtype="button" id="btn1" value="第一种事件绑定"onClick="hello()">

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

              if(Ext.isIE){

                     document.getElementById("btn2").attachEvent("onclick",function(){

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

                     });

              }else{

                     document.getElementById("btn2").addEventListener("click",function(){

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

                     });

              }

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

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

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

              });

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

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

       事件的分类:

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

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

       一个自定义事件的例子:

              没有用到事件处理的场景

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

                     <--孩子

                            饿了--->给一瓶牛奶

                            不饿--->不给

              用到事件的场景

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

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

                            感觉不饿就不喝

              角色功能分析

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

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

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

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

              Ext.define("children",{

                     extend:"Ext.util.Observable",

                     //定义构造函数           

                     constructor:function(){

                            this.state="hungry",

                            this.setMilk=function(milk){

                                   //调用事件的动作

                                   this.fireEvent("hungry",milk);

                            },

                            //添加一个事件

                            this.addEvents({"hungry":true}),

                            //注册这个事件

                            this.addListener("hungry",function(milk){

                                   if(this.state=="hungry"){

                                          this.drink(milk);

                                   }else{

                                          alert("我不饿");

                                   }

                            }),

                            //定义喝牛奶的方法

                            this.drink=function(milk){

                                   alert("我喝掉了一瓶牛奶:"+milk);

                            }

                     }    

              });

              varchildren=Ext.create("children",{});//本对象是牛奶过敏的对象

              //事件的拦截

              Ext.util.Observable.capture(children,function(eventName){

                     if(eventName=="hungry"){

                            alert("这个孩子对牛奶过敏,不能喝");

                            returnfalse;

                     }else{

                            returntrue;    

                     }

              });

              children.setMilk("三鹿牛奶");

              /*

               * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发这个事件的动作fireEvent

               * */

三、addManagedListener受管制的监听

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

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

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

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

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

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

              vartbar=Ext.create("Ext.toolbar.Toolbar",{

                     renderTo:Ext.getBody(),

                     width:400,

                     items:[

                            {xtype:"button",id:"create",text:"create"},

                            {xtype:"button",id:"delete",text:"delete"},

                            {xtype:"button",text:"撤销删除按钮",handler:function(){

                                   varc=Ext.getCmp("delete");

                                   if(c){

                                          c.destroy();

                                   }

                            }}

                     ]

              });  

              vardeleteB=Ext.getCmp("delete");

              deleteB.addManagedListener(Ext.getCmp("create"),"click",function(){

                     alert("添加操作");

              });  

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

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

              //定义father类

              Ext.define("father",{

                     extend:"Ext.util.Observable",

                     constructor:function(config){

                            this.listeners=config.listeners;

                            this.superclass.constructor.call(this,config);

                     }

              });

              varfather=Ext.create("father",{});

              //将孩子的事件机制分发到自身中

              father.relayEvents(children,["hungry"]);

              //注册分发过来的事件监听

              father.on("hungry",function(){

                     alert("送喝了三鹿牛奶的孩子去医院..");

              });

              children.setMilk("三鹿牛奶");

五、事件对象Ext.EventObject

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

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

       varc=Ext.get("btn4");

       c.on("click",function(e){

              alert(e);

              //获取单机的时候的坐标值  可以正确的获取到如果触发的事件一些参数

              alert(e.getPageX());

       });

六、事件管理器Ext.EventManager

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

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

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

       });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值