1、事件驱动编程概述
事件及事件处理其实就是当用户执行某一个操作,或者是对象进入某一个状态时,会给哪些关心这个动作及状态的对象发送一个通知,那些对象(监听者)接受到通知后,会作具体的响应。比如说,当用户移动或点击一下鼠标、者按下键盘,或者是当某一个组件隐藏时,或者某一个动作执行之前或执行完后等,都可以产生事件通知,对这个通知感兴趣的程序(事件监听器)会执行,并作相应的处理。
2、传统DOM事件编程例子
<script>
function a(e){
alert('some thing'+e.getX());
}
</script>
<input type="button" value="alert框" id="btnAlert" onclick="a();">
用代码来定义上面的事件
<script>
function a(e){
alert('some thing'+e.getX());
}
window.onload=function(){
document.getElementById("btnAlert").onclick=a;
}
</script>
<input type="button" value="alert框" id="btnAlert">
传统事件对象:
事件源,事件目标,监听器
IE中的Event处理!
3、Ext对DOM事件的扩展
对于Ext这种用于处理用户UI的框架来说,事件的处理及响应就显得更加的重要了,那些ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。
对于Ext来说,他在传统事件的基础上提供了更多丰富多彩的事件处理机制,我们可以使用他的事件处理机制,通过事件响应及处理,编写出交互性非常灵活的Web应用程序。
Ext的事件支持体现在两个方面,首先是对浏览器默认事件进行了进一步的扩展及封装,比如在Event对象的基础上提供了一个EventObject,提供了全局的事件管理器,灵活多变的事件响应方法,比如说在事件发生后几秒才响应事件,或者事件队列等功能。
使用Ext的事件处理机制,前面的事件处理可以变成如下的形式:
<script>
function a(e{
alert('some thing'+e.getX())
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input type="button" value="alert框" id="btnAlert">
在调用addListener 方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或事件响应函数。ExtJS支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,比如下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
由于调用了两次addListener或on方法,因此当点击按钮的时候会弹出两次信息。
当然,ExtJS还支持事件延迟处理或事件处理缓存等功能,比如下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
由于在调用addListener的时候传递指定的delay为2000,因此当用户点击按钮的时候,不会马上执行事件响应函数,而是在2000毫秒(也就是两秒)后才会弹出提示信息框。
另外,Ext对事件响应还提供了更多其它的特性支持,主要包括下面这些内容:
监听器缓冲,可以实现在指定的缓冲时间周期内,事件响应函数只执行一次,代码如下:
el.on('click', this.onClick, this, {buffer: 100});
还可以使用options选项来指定事件的响应及处理机制,比如是否阻止事件的进一步传播或响应等。
el.on('click', this.onClick, this, {preventDefault: true});
// only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});
// prevent default and stop propagation
el.on('click', this.onClick, this, {stopEvent: true});
当然,还可以包含其它的选项,比如下面的代码:
el.on('click', this.onClick, this, {
single: true, // 在事件响应函数触发后自动删除监听器
delegate: 'li.some-class' //自动事件代理 Automatic event delegation!
});
还可以在options参数中包括自定义的参数信息,比如下面的代码:
function onClick(ev, target, options){
alert(options.someProperty); // alerts 'someValue'
}
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});
可以一次性给某一个元素添加多个事件响应函数,比如下面的代码给元素添加了click、mouseover及mouseout等事件的事件响应函数。
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
4、Ext组件的事件
Ext的中有一个Ext.util.Observable类,他提供了对象的事件观察监听及消息通知、事件触发等一系列的事件及响应相关功能,而Ext组件的基类Component就是继承自这个类。因此,Ext为其组件提供了非常丰富的事件模型,比如组件生命周期变化、组件某一状态改变等,都提供了特定的事件支持。
比如说,所以有的组件都有一个render事件,而这个事件是在组件渲染完以后会触发,这时我们就可以通过监听这个事件来实现在组件渲染后执行特定的操作。看下面的代码:
function showHtml(p){
alert(p.el.dom.innerHTML);
}
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.addListener("render",showHtml);
panel.render("test")
那么一旦panel渲染(调用了render方法)以后,就会马上执行showHtml这个方法,并把panel对象作为参数传递给showHtml方法,因此我们可以看到这个panel的HTML代码片段。当然,如果Panel没有渲染,比如我们不调用render方法,则不会执行showHtml中的内容。
有一些事件的响应函数会返回特定值,Ext或根据这个响应函数的返回来判断是否执行相应的操作。比如说所有组件都有一个beforehide事件,这个事件是在组件变成隐藏之前触发,如果事件响应函数返回了一个false的值,那么他就会停止执行隐藏组件这个动作。
比如说来看下面的代码:
function confirmHide(){
return confirm("是否真要隐藏这个组件");
}
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.on("beforehide",confirmHide);
panel.render("test");
panel.hide();
那么这个当谳用panel.hide()这个方法时候,他就会隐藏这个组件,但是由于前面注册了一个beforehide事件,因此他就会在隐藏组件之前先调用confirmHide方法,这个方法通过一个confirm函数来让用户选择是否隐藏,如果我们们选择“是“则会返回true,那么这个组件就被隐藏,如果选择“否”则返回false,那么hide方法就会停止执行隐藏的操作。
那么一个组件究竟支持哪些事件,这些事件在触发时会给响应函数传递什么样的参数,以及事件响应函数是否会对组件的下一步操作产生影响,这就需要我们通过组件的API中的Events部分来了解具体的信息了。
分享到:
相关推荐
Linux Ext2分区文件系统驱动程序。让你的Window NT/2K/XP文便、快捷地访问Linux Ext2分区。
目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...
Ext4文件系统驱动程序 通过安装 $ npm install --save ext4 用法 var Ext4 = require ( 'ext4' ) 警告:对于容量大于2 ^ 53-1字节(8192 TB)的存储设备,此文件系统实现的操作是不安全的,因为它是可以安全地用...
ext文件系统解析 可在windows下映射读写ext文件分区 包含驱动代码
包含一个ext4的源代码,还有两个模拟ext运行原理的的代码。
在Linux下访问Windows分区,特别是对老的Fat分区是非常容易的,只需要mount一下即可,访问ntfs分区稍微复杂一点,需要驱动支持。但有时,我们也会需要从Windows系统下访问Linux分区,比如当启动Windows过后,忽然想...
安装ooize所需的ext2.2.zip,我自己安装时用的,没问题!
作为领域驱动设计的先驱Eric Evans,对业务逻辑层作了更细致地划分,细分为应用层与领域层,通过分层进一步将领域逻辑与领域逻辑的解决方案分离。 业务逻辑层在体系架构中的位置很关键,它处于数据访问层与表示层...
ZYNQ 7020驱动程序,SDK驱动库。 项目代码可直接编译运行~
ZYNQ 7010驱动程序,SDK驱动库。 项目代码可直接编译运行~
windows挂载 ext分区的驱动
e)scsi以消息方式将blk_mq_queue_data数据包装成struct scsi_cmnd格式发送给驱动usb-storage f)block层的缓冲区大小虽然有2M, 但是真正提交到scsi层时(scsi进一步提交到usb-storage)会根据设备本身的配置来拆分。如...
windows下的ext2文件系统的驱动
ext2fsX:适用于macOSLinux ext2fs文件系统驱动程序
github上下载回来的RTL8723BU 内核驱动源码,亲测可用
linux的rtl8188gu无线网卡驱动,可以解决8188gu芯片在linux无法识别的问题。解压后使用make命令
Dload mode:76XXU-109805-USNSKOL go to armprg 未发现设备 ...下载system.img.ext4 下载userdata.img.ext4 未发现设备 FTM mode:76XXU-USNSKPLYM-109805 writing FTM nv453=0 writing FTM nv453=0 OK
此资源为linux网卡驱动,可以驱动rtl8188eus。本驱动安装方式为手动源代码编译安装,可以驱动大部分linux。
1、 到oracle安装路径/oracle/product/11.2.0/db_1/jdbc/lib下,拷贝ojdbc6.jar文件到本地jdk的C:\Program Files\Java\jdk1.8.0_131\jre\lib位置
wordseer_extjs 用于 Wordseer 的 Ext JS 驱动的前端应用程序 这个 repo 是从的 JS 源分叉出来的,需要运行其余的文件 flask-master 分支旨在合并为的子树