标准的事件绑定方式 <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>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步