页面代码:
- <body>
- <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
- <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>
- <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>
- <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
- 事件使用例子,包括自定义事件及on、addListener和EventManager的使用。
- </div>
- <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">
- 鼠标移到我试试!
- </div>
- <br>
- <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
- <input type="button" name="button1" id="button1" value="点我" />
- </div>
- <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>
- </body>
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 + '<br>内容:' + this.innerHTML);
- });
- Ext.EventManager.addListener(eventTestDiv,"click",function(){
- Ext.Msg.alert('信息', 'Id:' + this.id
- + '<br>name:' + this.name
- + '<br>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 = '<br/>获取选填参数信息:<br/>选填参数个数:' + arguments.length + "<br/>";
- for(var i in arguments[2]) {
- msg += i + ":" + arguments[2][i] + "<br/>";
- }
- Ext.Msg.alert('信息', '打印eventTestDiv的信息:<br/><br/>Id:' + this.id
- + "<br/>" + 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}
- });
- */
- })