Ext事件

添加和删除事件

使用addEvent可以添加事件，简写on。

使用removeEvent删除事件，简写un。

使用purgeListeners()移除所有事件。

 

代码示例：

var fn = function() {         // TODO     };     //un是removeEvent的简写。用于移除一个事件。     p.on("walk",fn); // 添加一个事件。     p.un("walk",fn); // 删除一个事件。     p.purgeListeners();  // 删除所有的事件。

 

浏览器事件

浏览器事件即传统意义上的鼠标单击、移动等事件，Ext通过Ext.EventManager、Ext.EventObject、Ext.lib.Event对原生浏览器事件进行了封装。

也许有人会问，HTML元素本身已经支持浏览器事件，为什么还要重新设计一套事件机制呢？基本上所有的框架都会实现自己的时间机制。最要的原因就是：HTML元素处理时间是通过单一的时间绑定实现的。也就是说，如果不进行封装，一个事件只能绑定到一个事件处理句柄。

例如：

原生：

 

// 原生事件     var or = document.getElementById("originalEvent");     or.onclick = function() {         alert("event hander1");     };     or.onclick = function() {         alert("event hander2");     };

Onclick事件绑定2个事件处理句柄，最终运行会发现只会弹出event hander2，因为第一个已经被第二个覆盖掉了。但是如果使用Ext就不存在这样的问题。

 

Ext：

 

// Ext事件     var o = Ext.get("extEvent");     o.on("click",function() {         alert("event hander1" + new Date());     });     o.on("click",function(){         alert("event hander2" + new Date());     });

 

 

Ext.lib.Event

Ext.lib.Event是定义在adpater中的工具类，封装了不同浏览器的事件处理函数，为上层组件提供统一的功能接口。
 

主要的函数：

getX()、getY()、getXY()：获取事件发生的坐标。getXY()返回一个数组，getXY()[0]代表X坐标，getXY()[1]代表Y坐标。

 

getTarget:返回事件的目标元素，统一IE和其他浏览器的ev.target和ev.srcElement。

 

on和un:on将事件监听函数绑定到元素对应的事件上;un与on的作用相反。

 

purgeElement：将元素上的所有事件都清除。

 

PreventDefault:取消浏览器对当前事件的默认操作。如我们自定义右键菜单时就需要用到这个函数，防止弹出浏览器默认的右键菜单。

 

StopPropagation:阻止事件传递。内层元素触发的事件会传递给外层元素，调用这个函数阻止将事件传递给外层。

 

OnAvailable：3个参数,id,fn,scope。等到id对应的元素可用时才调用fn，scope是调用函数的作用域。

 

 

Ext.util.Observable

位于Ext组件的顶端，提供处理事件的基本功能。要实现一个可以处理事件的基本组件，最简单的做法就是集成Ext.util.Observable。

 

当使用addListenner/on处理注册事件时，可以使用复合式参数。如：

 

// 注册事件时可以使用复合式参数。     Ext.get("comEvt").on("click",function() { // 事件处理函数。         alert("复合式参数");     },this,{         single:true,//只执行一次         delay:1000 // 1S后调用事件处理函数。     }); This:调用函数的作用域。

上面的代码，运行后单击按钮，1S后弹出“复合式参数”，再单击就什么也不发生了。

 

 

使用on一次定义多个事件监听器。

 

// 一次定义多个事件监听器。     var tme = Ext.get('tme');     tme.on({         'click':{             fn:function() {                 Ext.Msg.show({                    title:'Message',                    msg: 'Text Value:' + this.value,                    buttons: Ext.Msg.OK,                    fn: function(){},                    animEl: 'body',                    icon: Ext.MessageBox.INFO                 });                 }         },         'mouseover':{             fn:function() {                 this.style.fontSize = 15;                 this.style.color = "#FFFFFF";             }         },         mouseout:{             fn:function() {                 this.style.fontSize = 15;                 this.style.color = "#FF0000";             }         }     });

 

 

为某个事件设置拦截器

 

var interceptor = Ext.get('interceptor');     interceptor.on('click',function() {         Ext.util.Observable.capture(p, function() {             alert("拦截Person的所有事件");             returntrue;         }, this);     }); 最开始的代码中，我们实现了一个类Person，它有3个事件walk,eat,sleep。 这里用Ext.util.Observable.capture来捕捉Person的所有事件。 运行后，打你家interceptor按钮，再分别单击walk,eat,sleep按钮，会先弹出“拦截Person的所有事件”，然后提示各个动作具体的信息。

上面的代码并没有阻止事件的执行，如果要阻止事件的执行，可以这样。

 

// 一个用户名输入框，输入的用户名赋给Person的name。如果用户名为空，则提示输入，并阻止事件往后执行。     Ext.get('interceptor2').on('click',function() {         var tm = Ext.get('name').getValue();         Ext.util.Observable.capture(p, function() {             if (tm === '' || tm === 'undefind') {                 Ext.Msg.show({                     title:"提示",                     msg:"请输入名字！",                     buttons:Ext.Msg.OK,                     animEl:'body',                     icon:Ext.MessageBox.WARNING                 });                 returnfalse;             }             p.name =  tm;             returntrue;         }, this);             });

 

Ext.util.Observable.releaseCapture:一次性清除fireEvent上所有的拦截器。

如果只想一次设置来暂停某个对象上所有事件的发生，可以使用suspendEvents()函数。

 

// 暂停某个对象上所有事件的发生     Ext.get("supsendEvent").on("click",function() {         p.suspendEvents(); //暂停Person对象上所有事件的发生。         Ext.MessageBox.show({             title:"提示",             msg:"已暂停Person对象上所有事件的发生!",             buttons:Ext.Msg.OK,             animEl:"body",             icon:Ext.MessageBox.INFO         });     });

在调用suspendEvents()后，Person对象上所有的事件都会失效。要向恢复，需要调用resumeEvents()。

 

// 恢复某个对象上的所有事件的发生。     Ext.get("resumeEvents").on("click",function() {         p.resumeEvents();         Ext.MessageBox.show({             title:"提示",             msg:"已恢复Person对象上所有事件的发生!",             buttons:Ext.Msg.OK,             animEl:"body",             icon:Ext.MessageBox.INFO         });     });

 

 

Ext.EventManager

作为事件管理器，Ext.EventManager提供了一系列相关处理事件的方法。最常用的是：onDocumentReady()、onWindowResize()、onTextResize()。

 

onDocumentReady()：就是Ext.onReady()，在文档渲染完毕，图片等未下载时调用。无论在任何时候，都需要保证脚本在HTML元素加载完毕后执行，这样可以避免很多潜在的问题。

 

OnWindowResize()：作用就是监听浏览器窗口大小的改变，它会提醒我们浏览器窗口的大小在何时改变，改变后的值是多少。

 

// onWindowResize():监听浏览器窗口大小的改变，并返回改变的大小。     // 因为它监听的是浏览器窗口，在浏览器打开时就已经存在，因此不需要写在Ext.onReady()里面。     Ext.EventManager.onWindowResize(function(width,height) {         Ext.MessageBox.show({             title:"提示",             msg:"改变后的窗口的大小：width("+width+"),height("+height+")",             buttons:Ext.Msg.OK,             animEl:'body',             icon:Ext.MessageBox.OK         });     });

 

onTextResize():监听用户修改浏览器文字的大小。

 

// onTextResize():监听用户修改的浏览器文字大小。     Ext.EventManager.onTextResize(function(oldSize,newSize) {         Ext.MessageBox.show({             title:"提示",             msg:"改变前字体的大小：" + oldSize +",改变后文字的大小：" + newSize,             buttons:Ext.Msg.OK,             animEl:'body',             icon:Ext.MessageBox.OK         });     });

 

 

Ext.EventObject

Ext.EventObject是对事件的封装，它将Ext自定义事件与浏览器事件结合到一起使用。

Ext.EventObject定义了一系列的功能按键，这样就不用去记ASCII码了。

 

// 按下按键时判断是否是空格，是空格提示。     Ext.get("evtObjText").on("keypress",function(e) {         if (e.getCharCode() == Ext.EventObject.SPACE) {             Ext.Msg.alert("提示","用户名不能有空格");             returnfalse;         }     });

 

Ext.EventObject是对原始事件的封装，如果要得到原始事件，调用Ext.EventObject.browserEvent。不过，这是未经任何加工的原生事件，各个浏览器表现不同，因此还是建议使用Ext.EventObject。

 

Ext.EventObject提供的另一个有趣的功能是getWheelDelta()，获取鼠标滚轮的Delta值。下面的例子监听mousewheel事件，动态改变div的宽度。

 

// 滚动鼠标滚轮，动态改变DIV的宽和高。     Ext.get(document.body).on("mousewheel",function(e) {         var delta = e.getWheelDelta();         var div = Ext.get("wheelDeltaDiv");         var width = delta*100 + div.getWidth();         var height = delta*100 + div.getHeight();         div.setWidth(width,true);         div.setHeight(height,true);     });