1.传统事件绑定回顾
1.1第一种
<script type="text/javascript">
function hello(){
alert('hello word');
}
</script>
html 调用
<input type="button" id="btn1" value="第一种事件绑定方式" onClick="hello()">
1.2第二种
if(Ext.isIE){ document.getElementById("btn2").attachEvent("onclick",function(){ alert("第二种事件绑定方式"); }); }else{ document.getElementById("btn2").addEventListener("click",function(){ alert("第二种事件绑定方式"); }); }
2.EXT方法
Ext.get('btn3').on("click",function(){ //get dom 中ID
alert("第三种事件绑定方式");
})
3.自定义 EXT事件 和 事件拦截
要让一个组件具有事件机制,必须先继承Ext.util.Observale
业务逻辑:
一个自定义事件的例子
没有用到事件处理的场景:
母亲问孩子和不饿-->
<-- 孩子
饿了-->给一瓶牛奶
不饿-->不给
事件场景:
母亲给孩子一个瓶牛奶-->
孩子拿到牛奶感觉饿了就喝
感觉不饿就不喝
角色功能分析:
孩子:应该有自己能拿到牛奶判断饿不饿的方法,当母亲给他牛奶的时候调用这个方法.
那么孩子就要有一个业务事件时刻监听这母亲什么时候给自己牛奶
母亲:调用孩子拿牛奶的方法,并且传入一瓶牛奶
(function(){ Ext.onReady(function(){ Ext.define("children",{ extend:'Ext.util.Observable', constructor:function(){ this.state = "hungry";//目前所属的状态 full //调用setMilk方法就可以触发hungry事件 this.setMilk = function(milk){ //(3)触发一个事件 调用 this.fireEvent('hungry',milk); }; //(1)注册一个事件 children对外有这样一个事件 声明 this.addEvents({'hungry':true}); //(2)注册 this.addListener("hungry",function(milk){ if(this.state == 'hungry'){ this.drink(milk); }else{ alert("我不饿"); } }); this.drink = function(milk){ alert("我喝掉了一瓶牛奶: "+milk); }; } }); /** * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发了这个事件的动作fireEvent */ var children = Ext.create("children",{});//本对象是牛奶过敏的对象 Ext.util.Observable.capture(children,function(eventName){ //事件拦截 if(eventName == "hungry"){ alert('这个孩子牛奶过敏不能和牛奶...'); return false; }else{ return true; } }) //母亲调用孩子的接受牛奶的方法 children.setMilk("三鹿牛奶"); }); })();
4.addManagedListener 收管制的监听
他是由调用的组建管理的,当组建执行了销毁命令的时候所有被组建管制的事件全部销毁
(function(){ Ext.onReady(function(){ var tbar = Ext.create('Ext.toolbar.Toolbar',{ renderTo:Ext.getBody(), width:500, 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(){ //将Ext.getCmp("create") 组件的“click”操作,交给deleteB管理。 alert('添加操作'); }); //Ext.getCmp("create").on("click",function(){}); }); })();
5.relayEvents 事件的分发和传播(控制实现事件在不同空间或对象内的传播)
比如说孩子喝完三鹿就去医院呀,老爸就要带着去医院(老爸继续孩子喝牛奶的事件)
//父亲类没有声明过任何监听事件 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",{}); //把children的事件传播给father father.relayEvents(children,['hungry']); father.on("hungry",function(){ alert("送喝了三鹿的孩子去医院.."); });
6.事件对象Ext.EventObject
不是一个单例,不能被直接new出来,他会存活早事件处理的函数中
Ext.onReady(function(){ var b = Ext.get("btn4"); b.on("click",function(e){ //e 为事件对象 alert(e.getPageX()) }); })
7.事件管理器Ext.EventManager
更方便的为页面元素绑定事件处理函数
Ext.onReady(function(){ Ext.EventManager.addListener("btn5",'click',function(){ alert("通过事件管理器进行事件的监听注册"); }) })