ExtJS学习之道：ExtJs事件（自定义事件、on、eventManager）示例

小鱼儿 2021-09-09 14:48 457阅读 0赞

页面代码：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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;width: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代码

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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. \})

[view plain]: http://blog.csdn.net/leadergg/article/details/5927614#