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