转自：https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5
ExtJs事件（自定义事件、on、eventManager）示例
鉴于最近更新主页比较慢，先把最近更新的extJs示例发到这里好了。
页面代码：
1 <body> 2 <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> 3 <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script> 4 <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script> 5 <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;"> 6 事件使用例子，包括自定义事件及on、addListener和EventManager的使用。 7 </div> 8 <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;150px;height:50px;background-color:green;"> 9 鼠标移到我试试！ 10 </div> 11 <br> 12 <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;"> 13 <input type="button" name="button1" id="button1" value="点我" /> 14 </div> 15 <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script> 16 </body>
js代码
1 /**************************************** 2 * 自定义事件使用 3 */ 4 var Person = function(){ 5 // 注册事件,该事件名字为：say 6 this.addEvents("say"); 7 // 另外一种方式注册多个事件 8 this.addEvents({ 9 "run" : true, 10 "see": false 11 }); 12 } 13 // Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能 14 Ext.extend(Person,Ext.util.Observable); 15 16 // 定义相关执行的方法 17 var speak = function(){ 18 alert("I can speak!"); 19 } 20 var run = function(){ 21 alert("I can run!"); 22 } 23 var see = function(){ 24 alert("I can see the word!"); 25 } 26 27 var person = new Person(); 28 // 将方法say绑定到事件say上。二者名字可以不一样 29 person.on("say", speak); 30 person.on("run", run); 31 person.on("see", see); 32 33 // 触发事件，这里只触发了say和run。see事件没有触发就不会发生 34 person.fireEvent("say"); 35 person.fireEvent("run"); 36 /*****************************************/ 37 38 Ext.onReady(function() { 39 // 返回的Element对象,不等价于document.getElementById(id) 40 // Ext.getDom(id)才等价于document.getElementById(id) 41 var eventTestDiv = Ext.get("eventTestDiv"); 42 // 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子 43 Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){ 44 Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML); 45 }); 46 Ext.EventManager.addListener(eventTestDiv,"click",function(){ 47 Ext.Msg.alert('信息', 'Id：' + this.id 48 + '<br>name：' + this.name 49 + '<br>value：' + this.value); 50 }); 51 /** 52 使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项 53 有4个配置选项: 54 delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)； 55 scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)； 56 single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)； 57 buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。 58 以下的配置未用过： 59 delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。 60 stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。 61 preventDefault {Boolean} : true表示为阻止默认动作。 62 stopPropagation {Boolean} : true表示为阻止事件传播。 63 normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。 64 */ 65 var button1 = Ext.get("button1"); 66 // addListener等价于on，on只是addListener的简写 67 button1.addListener("click",function(){ 68 // 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象 69 var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>"; 70 for(var i in arguments[2]) { 71 msg += i + "：" + arguments[2][i] + "<br/>"; 72 } 73 Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id 74 + "<br/>" + msg 75 ); 76 },eventTestDiv, { 77 // 事件延迟触发事件 78 delay : 500, 79 // 是否只触发一次 80 single: false, 81 msg : '我是追加的参数' 82 }); 83 /** 84 事件的几种写法（addListener和on是等价的）： 85 var fn = function (){ 86 // 这里添加需要处理的逻辑 87 }; 88 // 第一种写法 89 button1.addListener("click",fn,button1); 90 button1.addListener("mouseover",fn,button1); 91 92 //第二种写法 93 button1.on({ 94 click : fn, 95 mouseover : fn, 96 scope : button1 97 }); 98 99 //第三种写法 100 button1.on({ 101 click : {scope:button1, delay:3000, fn:fn}, 102 mouseover : {scope:button1, delay:1000, fn:fn} 103 }); 104 */ 105 })