ExtJs事件（自定义事件、on、eventManager）示例

鉴于最近更新主页比较慢，先把最近更新的extJs示例发到这里好了。

 

页面代码：

事件使用例子，包括自定义事件及on、addListener和EventManager的使用。

鼠标移到我试试！

 

js代码

 

/**************************************** * 自定义事件使用 */ var Person = function(){ // 注册事件,该事件名字为：say this.addEvents("say"); // 另外一种方式注册多个事件 this.addEvents({ "run" : true, "see": false }); } // Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能 Ext.extend(Person,Ext.util.Observable); // 定义相关执行的方法 var speak = function(){ alert("I can speak!"); } var run = function(){ alert("I can run!"); } var see = function(){ alert("I can see the word!"); } var person = new Person(); // 将方法say绑定到事件say上。二者名字可以不一样 person.on("say", speak); person.on("run", run); person.on("see", see); // 触发事件，这里只触发了say和run。see事件没有触发就不会发生 person.fireEvent("say"); person.fireEvent("run"); /*****************************************/ Ext.onReady(function() { // 返回的Element对象,不等价于document.getElementById(id) // Ext.getDom(id)才等价于document.getElementById(id) var eventTestDiv = Ext.get("eventTestDiv"); // 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子 Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){ Ext.Msg.alert('信息', 'Id：' + this.id + '
内容：' + this.innerHTML); }); Ext.EventManager.addListener(eventTestDiv,"click",function(){ Ext.Msg.alert('信息', 'Id：' + this.id + '
name：' + this.name + '
value：' + this.value); }); /** 使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项 有4个配置选项: delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)； scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)； single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)； buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。 以下的配置未用过： delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。 stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。 preventDefault {Boolean} : true表示为阻止默认动作。 stopPropagation {Boolean} : true表示为阻止事件传播。 normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。 */ var button1 = Ext.get("button1"); // addListener等价于on，on只是addListener的简写 button1.addListener("click",function(){ // 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象 var msg = '
获取选填参数信息：
选填参数个数：' + arguments.length + "
"; for(var i in arguments[2]) { msg += i + "：" + arguments[2][i] + "
"; } Ext.Msg.alert('信息', '打印eventTestDiv的信息：

Id：' + this.id + "
" + msg ); },eventTestDiv, { // 事件延迟触发事件 delay : 500, // 是否只触发一次 single: false, msg : '我是追加的参数' }); /** 事件的几种写法（addListener和on是等价的）： var fn = function (){ // 这里添加需要处理的逻辑 }; // 第一种写法 button1.addListener("click",fn,button1); button1.addListener("mouseover",fn,button1); //第二种写法 button1.on({ click : fn, mouseover : fn, scope : button1 }); //第三种写法 button1.on({ click : {scope:button1, delay:3000, fn:fn}, mouseover : {scope:button1, delay:1000, fn:fn} }); */ })