1、标准的事件绑定方式(1)
<html>
<head>
<title>标准的事件绑定方式(1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript">
function hello(){ alert('hello'); }
</script>
<body>
<input type='button' id='btn' value='ok' οnclick='hello()'>
</body>
</html>
2、标准的事件绑定方式(2)只适合IE浏览器 document.getElementById('btn').attachEvent('onclick',hello1);
<html>
<head>
<title>标准的事件绑定方式(2)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<input type='button' id='btn' value='ok'>
</body>
<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);
</script>
3、ExtJS方式的事件绑定
<HTML>
<HEAD>
<TITLE>ExtJS方式的事件绑定</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
</HEAD>
<script type="text/javascript">
Ext.onReady(function(){
function hello1(){
alert('hello1');
}
function hello2(){
alert('hello2');
}
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);
});
</script>
<BODY>
<input type='button' id='btn' value='ok'>
</BODY>
</HTML>
4、ExtJS支持的自定义事件
<HTML>
<HEAD>
<TITLE>ExtJS支持的自定义事件</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.sayNum = 0;
this.say = function(){
if(this.sayNum < 2){
this.sayNum += 1;
alert('I am '+name);
}else{
this.sayNum = 0;//触发自定义事件后计数器归零
this.fireEvent('onSay',this);//激发自定义事件
}
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});
</script>
</HEAD>
<BODY>
<input type='button' value='say' οnclick='per.say()'>
</BODY>
</HTML>
5、Firefox浏览器addEventListener方法示例
<html>
<head>
<title>Firefox浏览器addEventListener方法示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<input type='button' id='btn' value='ok'>
</body>
<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);
</script>
</html>
6、适合IE
<HTML>
<HEAD>
<TITLE>addListener绑定处理函数示例</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
function test(name){
alert("I'am " + name);
}
//为自定义事件绑定处理函数
per.addListener('onSay',test(name));
</script>
</HEAD>
<BODY>
<input type='button' value='say' οnclick='per.say()'>
</BODY>
</HTML>
7、使用各种浏览器
<HTML>
<HEAD>
<TITLE>addListener绑定处理函数示例</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
alert("I'am " + name);
});
</script>
</HEAD>
<BODY>
<input type='button' value='say' οnclick='per.say()'>
</BODY>
</HTML>
8、
<HTML>
<HEAD>
<TITLE>拦截器使用示例Observable.capture</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
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;
}
</script>
</HEAD>
<BODY>
<input type='button' value='say' οnclick='per.say()'>
</BODY>
</HTML>
9、
<HTML>
<HEAD>
<TITLE>addManagedListener受管事件监听器</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<STYLE TYPE="text/css">
.newIcon { background-image: url(../chapter03/images/new.gif) !important; }
.openIcon { background-image: url(../chapter03/images/open.gif) !important; }
.saveIcon { background-image: url(../chapter03/images/save.gif) !important; }
</STYLE>
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
</HEAD>
<BODY STYLE="margin: 10px"></BODY>
<script type="text/javascript">
Ext.onReady(function(){
function createFn(){
alert('新建');
}
function openFn(){
alert('打开');
}
function saveFn(){
alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
renderTo: Ext.getBody(),
bodyPadding: 5,
width:300,
items : [
{text:'新建',id:'createBtn',iconCls:'newIcon'},
{text:'打开',id:'openBtn',iconCls:'openIcon'},
{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
{text:'销毁新建按钮',id:'destroy1',handler : function(){
//销毁新建按钮
Ext.getCmp('createBtn').destroy();
Ext.getCmp('destroy1').destroy();
}}
]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制,如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
});
</script>
</HTML>
10、
<HTML>
<HEAD>
<TITLE>relayEvents传播分发事件</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//创建Employee工人类
var Employee = Ext.extend(Ext.util.Observable,{
constructor : function(config){
this.name = config.name;
this.eat = function(){
this.fireEvent('startEat',this);//激发开始吃饭事件
this.fireEvent('finishEat',this);//激发结束吃饭事件
}
this.addEvents({//加入自定义事件
"startEat" : true,//开始吃饭事件
"finishEat" : true//结束吃饭事件
});
Employee.superclass.constructor.call(this, config)
}
});
//定义Waiter服务员类
var Waiter = Ext.extend(Ext.util.Observable,{
constructor : function(config){
Waiter.superclass.constructor.call(this, config);
}
});
//创建员工对象
var emp = new Employee({name:'tom'});
//为自定义事件绑定处理函数
emp.addListener('startEat',function(){
alert(this.name + '开始吃饭了。');
});
emp.addListener('finishEat',function (){
alert(this.name + '吃完饭,可以收拾盘子了。');
});
//创建服务员对象
var waiter = new Waiter();
//使服务员对象与员工对象的finishEat事件进行关联
//也就是说当员工对象的finishEat事件发生后,先执行自身的事件监听器,
//然后事件会传递到服务员对象中,激发服务员对象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
alert('服务员开始收拾盘子。');
});
</script>
</HEAD>
<BODY>
<input type='button' value='员工吃饭' οnclick='emp.eat()'>
</BODY>
</HTML>
11、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Ext.EventObject示例</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/src/core/src/locale/ext-lang-zh_CN.js"></script>
</HEAD>
<BODY>
<input id='buttonTest' type='button' value='click'>
</BODY>
<script type="text/javascript">
var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//为click事件绑定处理函数
function handler(e){//事件处理函数
//获取事件发生时的x坐标
var x = e.getPageX();
//获取事件发生时的y坐标
var y = e.getPageY();
var msg = '事件发生坐标 : x='+x+' y='+y;
alert(Ext.EventManager.getPageXY(e));
alert(msg);
}
</script>
</HTML>
1、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Ext.EventManager应用举例</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/src/core/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.EventManager.addListener('btn','click',handler);//绑定处理函数
function handler(e){//事件处理函数
//获取事件发生时的x坐标
var x = e.getPageX();
//获取事件发生时的y坐标
var y = e.getPageY();
var msg = '事件发生坐标 : x='+x+' y='+y;
alert(Ext.EventManager.getPageXY(e));
alert(msg);
alert('hello');
}
/**function handler(){//事件处理函数
alert('hello');
}*/
});
</script>
</HEAD>
<BODY>
<input type='button' value='say' id='btn'>
</BODY>
</HTML>