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); });