ExtJS学习之道：ExtJs事件（自定义事件、on、eventManager）示例
2013-09-30 12:39
357 查看
页面代码：
[javascript]
view plaincopyprint?
<body>
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>
<div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
事件使用例子，包括自定义事件及on、addListener和EventManager的使用。
</div>
<div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">
鼠标移到我试试！
</div>
<br>
<div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
<input type="button" name="button1" id="button1" value="点我" />
</div>
<mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>
</body>
js代码
[javascript]
view plaincopyprint?
/****************************************
* 自定义事件使用
*/
var Person = function(){
// 注册事件,该事件名字为：say
this.addEvents("say");
// 另外一种方式注册多个事件
this.addEvents({
"run" : true,
"see": false
});
}
// Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能
Ext.extend(Person,Ext.util.Observable);
// 定义相关执行的方法
var speak = function(){
alert("I can speak!");
}
var run = function(){
alert("I can run!");
}
var see = function(){
alert("I can see the word!");
}
var person = new Person();
// 将方法say绑定到事件say上。二者名字可以不一样
person.on("say", speak);
person.on("run", run);
person.on("see", see);
// 触发事件，这里只触发了say和run。see事件没有触发就不会发生
person.fireEvent("say");
person.fireEvent("run");
/*****************************************/
Ext.onReady(function() {
// 返回的Element对象,不等价于document.getElementById(id)
// Ext.getDom(id)才等价于document.getElementById(id)
var eventTestDiv = Ext.get("eventTestDiv");
// 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子
Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){
Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);
});
Ext.EventManager.addListener(eventTestDiv,"click",function(){
Ext.Msg.alert('信息', 'Id：' + this.id
+ '<br>name：' + this.name
+ '<br>value：' + this.value);
});
/**
使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项
有4个配置选项:
delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；
scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；
single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；
buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。
以下的配置未用过：
delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。
stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。
preventDefault {Boolean} : true表示为阻止默认动作。
stopPropagation {Boolean} : true表示为阻止事件传播。
normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。
*/
var button1 = Ext.get("button1");
// addListener等价于on，on只是addListener的简写
button1.addListener("click",function(){
// 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象
var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";
for(var i in arguments[2]) {
msg += i + "：" + arguments[2][i] + "<br/>";
}
Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id
+ "<br/>" + msg
);
},eventTestDiv, {
// 事件延迟触发事件
delay : 500,
// 是否只触发一次
single: false,
msg : '我是追加的参数'
});
/**
事件的几种写法（addListener和on是等价的）：
var fn = function (){
// 这里添加需要处理的逻辑
};
// 第一种写法
button1.addListener("click",fn,button1);
button1.addListener("mouseover",fn,button1);
//第二种写法
button1.on({
click : fn,
mouseover : fn,
scope : button1
});
//第三种写法
button1.on({
click : {scope:button1, delay:3000, fn:fn},
mouseover : {scope:button1, delay:1000, fn:fn}
});
*/
})
[javascript]
view plaincopyprint?
<body>
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>
<div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
事件使用例子，包括自定义事件及on、addListener和EventManager的使用。
</div>
<div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">
鼠标移到我试试！
</div>
<br>
<div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
<input type="button" name="button1" id="button1" value="点我" />
</div>
<mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>
</body>
js代码
[javascript]
view plaincopyprint?
/****************************************
* 自定义事件使用
*/
var Person = function(){
// 注册事件,该事件名字为：say
this.addEvents("say");
// 另外一种方式注册多个事件
this.addEvents({
"run" : true,
"see": false
});
}
// Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能
Ext.extend(Person,Ext.util.Observable);
// 定义相关执行的方法
var speak = function(){
alert("I can speak!");
}
var run = function(){
alert("I can run!");
}
var see = function(){
alert("I can see the word!");
}
var person = new Person();
// 将方法say绑定到事件say上。二者名字可以不一样
person.on("say", speak);
person.on("run", run);
person.on("see", see);
// 触发事件，这里只触发了say和run。see事件没有触发就不会发生
person.fireEvent("say");
person.fireEvent("run");
/*****************************************/
Ext.onReady(function() {
// 返回的Element对象,不等价于document.getElementById(id)
// Ext.getDom(id)才等价于document.getElementById(id)
var eventTestDiv = Ext.get("eventTestDiv");
// 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子
Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){
Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);
});
Ext.EventManager.addListener(eventTestDiv,"click",function(){
Ext.Msg.alert('信息', 'Id：' + this.id
+ '<br>name：' + this.name
+ '<br>value：' + this.value);
});
/**
使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项
有4个配置选项:
delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；
scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；
single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；
buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。
以下的配置未用过：
delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。
stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。
preventDefault {Boolean} : true表示为阻止默认动作。
stopPropagation {Boolean} : true表示为阻止事件传播。
normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。
*/
var button1 = Ext.get("button1");
// addListener等价于on，on只是addListener的简写
button1.addListener("click",function(){
// 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象
var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";
for(var i in arguments[2]) {
msg += i + "：" + arguments[2][i] + "<br/>";
}
Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id
+ "<br/>" + msg
);
},eventTestDiv, {
// 事件延迟触发事件
delay : 500,
// 是否只触发一次
single: false,
msg : '我是追加的参数'
});
/**
事件的几种写法（addListener和on是等价的）：
var fn = function (){
// 这里添加需要处理的逻辑
};
// 第一种写法
button1.addListener("click",fn,button1);
button1.addListener("mouseover",fn,button1);
//第二种写法
button1.on({
click : fn,
mouseover : fn,
scope : button1
});
//第三种写法
button1.on({
click : {scope:button1, delay:3000, fn:fn},
mouseover : {scope:button1, delay:1000, fn:fn}
});
*/
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJs事件（自定义事件、on、eventManager）示例
- ExtJs事件（自定义事件、on、eventManager）示例
- 简易密码输入自定义控件示例 含自定义事件 可在调用窗口事件视图中看到事件名
- Jquery Ajax学习实例7 Ajax所有过程事件分析示例
- 安卓学习笔记---Fragment 里面加webview 监听onback事件（WebView的返回以及整个退出事件）
- Qt学习: QCloseEvent关闭事件的使用及代码示例
- 学习jQuery的on事件
- 学习官方示例 - TApplication.OnDeactivate
- ExtJS4学习笔记三－－远程访问数据源示例
- ZP的EXTJS学习笔记（三）——邮箱功能的开发（按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组）
- Extjs学习 事件处理
- jQuery新的事件绑定机制on()示例应用
- Fiori学习笔记 - 事件之自定义事件
- 学习jQuery的on事件
- ExtJs UI框架学习九--事件(fireEvent)
- jQuery新的事件绑定机制on()示例应用
- ExtJS Panel 学习示例
- C#学习笔记----事件 自定义事件
- ExtJs源码分析与学习—ExtJs事件机制（四）
- Android学习记录：MotionEvent，onTouch，OnTouchListener 事件机制等学习