标準的事件綁定方式
<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>