ExtJs的事件机制Event(学员总结)
来源:互联网 发布:as3是一门编程语言吗 编辑:程序博客网 时间:2024/05/17 06:24
ExtJs的事件机制Event
一、事件的三种绑定方式
1、HTML/DHTML
在标签中直接增加属性触发事件
<script type="text/javascript"> function hello(){ alert("hello word"); }</script> <input type="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); } } }); var children=Ext.create("children",{});//本对象是牛奶过敏的对象 //事件的拦截 Ext.util.Observable.capture(children,function(eventName){ if(eventName=="hungry"){ alert("这个孩子对牛奶过敏,不能喝"); return false; }else{ return true; } }); children.setMilk("三鹿牛奶"); /* * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发这个事件的动作fireEvent * */
三、addManagedListener受管制的监听
概述:它是由调用的组件管理的,当组件执行了销毁的命令的时候所有被组件管制的事件全部销毁
创建工具条,利用items属性添加三个按钮create delete撤销删除按钮
利用button中的handler点击事件来执行动作。调用destroy方法撤销delete按钮(在HTML中的id用get方法获取,而在组件指定的id需要用getCmp方法来获取)
在delete按钮中添加受管理的组件的事件机制。addManagedListener方法来添加
参数:第一个指定的是组件 第二个是事件类型 第三个是此事件的动作
流程:点击create按钮指定动作。在点击撤销删除按钮的时候将delete按钮删除,并且它管理的事件全部销毁,这时点击create无效果
var tbar=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(){ var c=Ext.getCmp("delete"); if(c){ c.destroy(); } }} ] }); var deleteB=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); } }); var father=Ext.create("father",{}); //将孩子的事件机制分发到自身中 father.relayEvents(children,["hungry"]); //注册分发过来的事件监听 father.on("hungry",function(){ alert("送喝了三鹿牛奶的孩子去医院.."); }); children.setMilk("三鹿牛奶");
五、事件对象Ext.EventObject
概述:当你添加事件的时候会传入一个Ext.EventObject对象的参数,不是一个单例,
不能被直接new出来,他会存活在事件处理的函数中
var c=Ext.get("btn4"); c.on("click",function(e){ alert(e); //获取单机的时候的坐标值 可以正确的获取到如果触发的事件一些参数 alert(e.getPageX()); });
六、事件管理器Ext.EventManager
概述:它可以更方便的为页面元素绑定事件处理函数,方法:addListener为元素增减事件
Ext.EventManager.addListener("btn5","click",function(){
alert("通过事件管理器来进行事件注册监听");
});
- ExtJs的事件机制Event(学员总结)
- ExtJs的事件机制Event
- ExtJs的事件机制Event
- ExtJs的事件机制Event
- Extjs的事件机制
- event 事件机制的原理
- EXTJS 事件机制的探究
- 06extjs的事件机制
- HTML-事件(Event)的总结
- Extjs继承机制和窗体创建(10级学员 刘根鹏课堂总结)
- C++事件(Event)机制的实现
- JavaScript的事件机制event对象
- C++事件(Event)机制的实现
- C++事件(Event)机制的实现
- Event事件处理机制的实例应用
- Flex Event事件机制
- Event事件机制
- Event事件机制
- The Lion King's Complete Lines
- UIViewController的生命周期及iOS程序执行顺序
- 第十三周任务二纯虚函数与继承
- Cocos2d-x 动作系统浅析
- 简易记事本,只有保存,打开,退出3个功能!
- ExtJs的事件机制Event(学员总结)
- getchar输入EOF以及\n问题
- class function或class procedure是什么意思
- 小菜关于c语言的一次认识!(本人新手,嘿嘿)
- html embed用法
- Ubuntu 搭建Android4.0编译环境
- hdu 3016 Man Down
- 设计模式之观察者模式学习
- 【编程珠玑】第八章 算法设计技术