ExtJS事件机制的探究电脑知识与技术doc.docx
- 文档编号:2163809
- 上传时间:2022-10-27
- 格式:DOCX
- 页数:8
- 大小:23.41KB
ExtJS事件机制的探究电脑知识与技术doc.docx
《ExtJS事件机制的探究电脑知识与技术doc.docx》由会员分享,可在线阅读,更多相关《ExtJS事件机制的探究电脑知识与技术doc.docx(8页珍藏版)》请在冰豆网上搜索。
ExtJS事件机制的探究电脑知识与技术doc
ExtJS事件机制的探究,电脑知识与技术,
《电脑知识与技术》
ExtJS事件机制的探究
袁中旺,宋绍云,王晓燕,陈道鑫
(玉溪师范学院信息技术工程学院,云南玉溪653100)
摘要:
在分析ExtJS事件机制结构的基础上,结合实例浅谈了ExtJS中事件用的处理以及传播过程,如何实现兼容于各大主流浏览器的特点。
介绍了DOM事件标准定义的两种事件流。
关键词:
ExtJS;事件模型;Observable;事件传播
中图分类号:
TP311.1文献标识码:
A文章编号:
1009-3044(2011)09-2189-03
ExtJS是一种JavaScript编写的与后台无关的Ajax框架,它提供了可重用的对象和部件,在简化Ajax开发的同时又起到丰富客户端界面的效果。
该框架的核心思想是通过JavaScript动态创建页面的标记元素,从而使得页面更灵活。
其实ExtJS本身并没使用到新技术,而是在JavaScript基础上结合这些设计思想发展过来的。
而ExtJS事件机制作为ExtJS架构体系中核心部分。
它不仅扩展浏览器Dom元素事件,使其兼容于各大主流浏览器,而且它采用观察者模式的来架构组件的事件机制,为组件提供了良好的扩展性。
1ExtJS事件机制
什么是事件呢?
事件及事件处理其实就是当用户执行某一个状态,或者是当对象执行某一个操作时,会给哪些关心这个动作的对象发送一个通知,那些对象(监听者)接受到通知后,会执行相应的操作[2]。
针对数据操控行为都可以被看为一个事件,并以相同的方式来处理。
事件常用于图形化的界面中,是图形化界面消息通信的一项重要元素。
ExtJS为用户提供了一批标准的组件,当然这些组件支持事件的机制的,这样可以围绕组件的事件进行编程了[1]。
ExtJS框架中存在着大量的事件操作。
那些事件所通知的对象不仅是可以看得见控件,而且还可以延伸到非可视的数据层面对象。
1.1浏览器事件
ExtJS将事件分为了两种:
浏览器事件和自定义事件。
浏览器事件,就是传统意义上的鼠标单击、移动等事件,由浏览器根据用户的动作而触发的一类事件,与页面元素密切相关。
相关的类有Ext.Element、Ext.EventManager、Ext.EventObject、Ext.lib.Event。
Element包含了常见的DOM方法和属性,它提供了一个快捷的、统一的、跨浏览器的接口。
而对于事件的处理,Ext.Element将这一操作委托给了Ext.EventManager,由Ext.EventManager对页面浏览器事件实施管理,如增加事件处理器、移除事件处理器等操作。
至于Ext.EventObject,则是对原始的浏览器事件进行了封装,提供给事件处理器一个统一的事件接口。
那么Ext.lib.Event呢?
其实Ext.EventManager的很多功能都是调用Ext.lib.Event来实现的,它维护着所有的事件处理器。
在当前主流的浏览器中主要存在三种事件模型:
原始事件模型(originaleventmodel),DOM2事件模型,IE事件模型。
其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。
1.1.1原始事件模型
原始事件模型可以通过嵌入处理代码到HTML标签和赋值到元素的事件属性中来进行注册事件的处理工作。
它和其他两个模型最大的区别在于该模型中没有明确的event对象,可以有两种方法将事件处理函数跟特定的事件联系起来。
1)在html中设置感兴趣的元素的属性。
//输入代码
这是一个简单的测试,如果想要注册一个事件,最原始的方式就是直接在其HTML标签中对应的事件属性中写上可运行的JS代码。
在上面的代码中,给a标签的click事件编写了处理语句。
是直接通过id来取到当前标签的属性值,得到处理结果是弹出direct:
test值。
2)在javascript中设置元素对象的属性:
如docuemnt.getElementById(“form1”).onsubmite=validateForm;采用这种方法时应注意的是不能在函数调用的末尾加上括号,是把对函数的引用赋值给对象,而不是把函数的执行结果赋值给对象。
这样可以最大程度的降低js文件和html文件的依赖性,缺点是不够直观。
浏览器会根据函数的返回值来决定是否激活元素的默认行为———返回true则激活,否则不激活。
通过两种方法中的任意一种设置事件处理函数相当于给该元素定义了一个新方法,在事件被触发的时候,在处理函数体内this关键字指向的是发出该事件的元素。
1.1.2DOM2事件模型
DOM2事件模型参考了IE的气泡模型而制定的,它是由w3c制定的规范。
在原始模型中事件一旦发生就直接调用事件属性,不存在其它事件传播过程。
而在DOM2模型中事件有一个特殊的传播过程,分为三个阶段:
(1)capturingphase:
事件被从document一直向下传播到目标元素,在这过程中如果有哪个祖先元素对该事件感兴趣可以注册自己的处理函数。
(2)事件到达目标元素,执行目标元素的事件处理函数。
(3)事件从目标元素上升一直到达document,虽然所有的事件类型都会经历
(1)阶段但是只有部分事件会经历(3)阶段。
在整个的事件传播过程中可以通过调用event.stopPropagation()来停止事件的传播,调用preventDefault()来阻止浏览器的默认行为。
这个事件模型有些复杂,但是它集中事件处理代码方面作用很大,例如:
如果希望在元素上注册onclick事件,那么可以直接注册在documnet上,而在第一或第三阶段来处理该事件,利用event的target来判断是否是
元素。
在DOM2模型中document中的所有元素和window对象都实现了EventTarget接口,该接口定义了添加和删除事件处理函数的的方法addEventListener(“eventType”,”handler”,”true!
false”);//eventType去掉原始模型中的on前缀//handler的执行在它定义的范围内被执行,没有特殊的执行链//”true|false”如果为true则在事件传播的第一阶段会执行该处理函数,//为false直接在该元素上发生或者在(3)阶段的祖先元素中被执行。
removeEventListner(“eventType”,”handler”,”true!
false”);在实现了DOM2的浏览器中,为了提供向后兼容性,通过原始模型设置的事件处理函数也会得到一个event的引用,可以在函数内部得到并使用,在IE中也一样。
1.1.3IE模型
IE模型也提供了一个Event对象封装了事件的详细信息,但是IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2。
dom2和ie两种事件模型中通用的事件处理函数functionportableEventHandler(event){vare=event||window.event;}事件处理函数的注册和删除是通过元素的attachEvent(”eventType”,”handler”)detachEvent(“eventType”,”handler”)与dom2不同的是eventType有on前缀,但是令人费解的是这两个函数是作为全局函数被调用的,就是说在处理函数的内部this指代的是window对象。
通过setCapture()releaseCapture()捕捉鼠标事件,所有的document元素都具有这两个函数,一旦调用了某个元素的setCapture()函数,所有后续的鼠标事件都会在上浮之前传到该元素,直到调用了releaseCapture(),注意在浏览器失去焦点,弹出对话框或弹出系统菜单时都会使元素失去捕捉能力,这时会有一个onlosecapture事件发生。
最常见的调用setCapture()情况是在onmousedown的处理函数中,以捕捉后续的mousemove事件。
1.2自定义事件
这类事件通常与组件相关。
并且需要用户根据组件的状态自己触发。
ExtJS的自定义事件主要分为三额步骤:
1.在类中定义事件名称:
2.实例化对象,并在该对象中定义事件的监听函数3.触发事件。
相关的类Ext.util.Observable、Ext.util.Event(Observable.js)。
Ext.util.Observable是所有组件(component)的父类,它的一切子类都可以获得自定义新事件的能力,只要用户为组件登记了事件,设置了事件监听器,那么,Observable类会在其events属性那里保存事件。
Observable给所有的子类提供了一个统一的接口来发布事件以及管理事件,这一特性对于组件来说是至关重要的。
通过ExtJS的自定义事件的机制,可以实现一对多的观察者模式,也可以实现一对一的绑定模式,这一点,在ExtJS的开发中是很重要的地位。
ExtJS的组件编程也极度依赖于事件模型。
事件模型的最初底层不外乎是浏览器开发商对网页的DOM结构、DOM模型预留的事件监听器接口的API,[3]使得每一个元素(Element)只要创建完毕之后,就存在一种“无限循环”的机制以等待用户的动作,并根据DOM元素所发生的动作去触发事件。
从语法的表面上,ExtJS尝试尝试以一种简约的编程风格涵盖主流浏览器的事件模型,好让开发者摆脱异种浏览器代码适应的问题。
2事件传播
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。
这两种事件流分别是捕获和冒泡。
和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。
Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。
应该值得庆幸的是,W3C决定组合使用这两种方法,现在大多数新浏览器都遵循这两种事件流方式。
2.1冒泡事件流
当事件在某一DOM元素被触发时,例如:
用户在复选框节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,这时,该事件是onclick事件。
在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在InternetExplorer里可以通过设置事件对象的cancelBubble属性为true。
如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档的根。
2.2捕获事件流
和冒泡事件流不同,在捕获事件流中事件的处理是从DOM层次的根开始,并非从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。
在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。
事件到达目标元素后,它会接着通过DOM节点再进行冒泡。
3结论
ExtJS框架中存在着大量的事件操作。
如今,在为Web页面批上“C/S式的用户操作界面后,围绕事件的开发任务也不期而遇,成为重中之重。
虽然现代浏览器本身提供了丰富的事件,但涉及到高级组件我们仍需一套可靠的事件机制去实现。
e交叉路口智能交通控制系统标准(专科机电一体化)1
交叉路口智能交通控
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS 事件 机制 探究 电脑知识 技术 doc