EXTJS 事件 相关示例

标准的事件绑定方式 <body> <input type='button' id='btn' value='ok'> </body> <mce:script language="JavaScript"><!-- function hello1(){ alert('hello1'); } function hello2(){ alert('hello2'); } var button = document.getElementById('btn'); button.attachEvent('onclick',hello1);//该方法仅适用于IE浏览器 button.attachEvent('onclick',hello2); // --></mce:script> Extjs方式的事件绑定 Ext.onReady(function(){ function hello1(){ alert('hello1'); } function hello2(){ alert('hello2'); } var button = Ext.get('btn'); button.addListener('click',hello1);//绑定事件处理函数 button.addListener('click',hello2); }); firefox浏览器的事件绑定 <body> <input type='button' id='btn' value='ok'> </body> <mce:script language="JavaScript"><!-- function hello1(){ alert('hello1'); } function hello2(){ alert('hello2'); } var button = document.getElementById('btn'); button.addEventListener('click',hello1,false); button.addEventListener('click',hello2,false); // --></mce:script> Extjs支持的自定义事件 <mce:script type="text/javascript"><!-- Person = function(name){ this.name = name; this.sayNum = 0; this.say = function(){ if(this.sayNum < 2){ this.sayNum += 1; alert('I am '+name); }else{ this.fireEvent('onSay',this);//激发自定义事件 } } this.addEvents({//加入自定义事件 "onSay" : true }); } Ext.extend(Person, Ext.util.Observable);//继承自Ext.util.Observable var per = new Person('tom');//创建对象 per.addListener('onSay',handler);//为自定义事件绑定处理函数 function handler(){//事件处理函数 alert('发生了自定义事件'); } // --></mce:script> 或者: <mce:script type="text/javascript"><!-- Person = function(name){ this.name = name; this.say = function(){ this.fireEvent('onSay',this.name);//激发自定义事件 } this.addEvents({//加入自定义事件 "onSay" : true }); } Ext.extend(Person, Ext.util.Observable);//继承自Ext.util.Observable var per = new Person('tom');//创建对象 per.addListener('onSay',handler);//为自定义事件绑定处理函数 function handler(name){//事件处理函数 alert("I'am " + name); } // --></mce:script> 事件拦截器的使用 <mce:script type="text/javascript"><!-- Person = function(name){ this.name = name; this.say = function(){ this.fireEvent('onSay',this);//激发自定义事件 } this.addEvents({//加入自定义事件 "onSay" : true }); } Ext.extend(Person, Ext.util.Observable);//继承自Ext.util.Observable var per = new Person('tom');//创建对象 per.addListener('onSay',handler);//为自定义事件绑定处理函数 function handler(){//事件处理函数 alert('发生了自定义事件'); } //为per对象添加拦截器 Ext.util.Observable.capture(per,captureFunction); //拦截函数 function captureFunction(eventName){ if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行 alert("拦截事件“"+eventName+"”的执行。"); return false; } return true; } // --></mce:script> Ext.EventObject e 示例 <script type="text/javascript"> var btn = Ext.get('buttonTest'); btn.addListener('click',handler);//为click事件绑定处理函数 function handler(e){//事件处理函数 //获取事件发生时间 var time = (new Date(e.getTime())).format('Y-m-d H:m:s'); //获取事件发生时的x坐标 var x = e.getPageX(); //获取事件发生时的y坐标 var y = e.getPageY(); var msg = '事件发生时间 : '+time+'\n'+ '事件发生坐标 : x='+x+' y='+y; alert(msg); } </script> Ext.EventManager应用举例 绑定处理事件 <script type="text/javascript"> Ext.onReady(function(){ Ext.EventManager.addListener('btn','click',handler);//绑定处理函数 function handler(){//事件处理函数 alert('hello'); } }); </script> </HEAD> <BODY> <input type='button' value='say' id='btn'> </BODY> </HTML>

转载于:https://www.cnblogs.com/johan/archive/2010/04/05/1947980.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值