标准的事件绑定方式 <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>
