Extjs学习笔记--（五，事件）
Extjs中事件包括浏览器事件（单机按钮，鼠标移动等触发）和内部事件（组件之间的联动）
绑定浏览器事件的过程Ext.EventManager
要为元素绑定事件，通常会使用EventManager.on方法
Ext.EventManager.on(el,eventname,fn[,scope,options])
el要绑定的事件元素，可以为元素的id，element对象获htmlelement对象
eventname一般情况下是事件的名称，但是在一次定义多个事件时可以是一个对象，当eventname是事件名称时，fn就是事件要触发的函数，当eventname是对象时fn会被忽略
scope；作用域
options：事件触发函数的配置对象
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" /> <script src="Extjs/bootstrap.js"></script> <script src="Extjs/locale/ext-lang-zh_CN.js"></script> </head> <body> <input type="text" id="input1" value="请输入"/> <input type="text" id="input2" value="请输入"/> <input type="text" id="input3" value="请输入"/> <script type="text/javascript"> var focus=function(e, el) { if (el.value == ‘请输入‘) el.value = ‘‘; } var blur = function (e, el) { if (el.value == ‘‘) el.value = ‘请输入‘; } //单项绑定事件 Ext.EventManager.on("input1", "focus", focus); Ext.EventManager.on("input1", "blur", blur); //多项同时绑定 Ext.EventManager.on("input2", { focus: focus, blur:blur }) Ext.EventManager.on("input3", { focus: { fn: focus }, blur: { fn: blur } }) </script> </body> </html>
<div id="div1" style="background:red;height:200px;width:200px">
</div>
<script type="text/javascript">
Ext.EventManager.on("div1","click", function(e) {
alert(e.getXY());
}, this, { delay: 3000 });
</script>
封装浏览器事件：Ext.EventObject
浏览器事件都要封装成EventObjectImpl对象的实例才能传递给触发函数
EventObject是Ext.EventObjectImpl的实例，相当于一个共享的浏览器事件封装对象，使用setEvent方法将浏览器事件封装成EventObject对象 后再传递给触发函数，从而实现跨平台的处理，所以SetEvent是封装浏览器事件的关键方法
EventObjectImpl对象除了提供了事件的基础属性外，还提供了一系列处理方法
getCharCode：返回事件的字符编码
getKey：返回标准化后的键盘代码
getPageX，getX：返回事件的x坐标
getPageY，getY：返回事件的y坐标
getXY：以数组格式返回事件坐标点
getPoint:以point对象格式返回事件的坐标点
getRealatedTarget：返回与事件目标节点相关的节点
getTarget:返回事件目标节点
getWheelDelta：返回标准化后的鼠标滚轮滚动值
hasModifier：如果键盘的ctrl，meta，shift，或者alt键按下返回true
injectEvent：使用EventObject对象的数据和一个新目标注入一个Dom事件
这是一个多层次的技术，不建议使用
isNavKeyPress：如果键盘按下的是Pageend，pageup，end，home，箭头键，回车键，tab键，或者esc键，该值为true
isSpecialKey：如果键盘按下的是isNavKeyPress，ctl，backspace，shift，alt，pause等时，为true
preventDefault：组织浏览器的默认事件处理
stopEvent：停止事件，执行preventDefault方法，主要用于阻止浏览器右键菜单，以便使用自己的弹出菜单
stopPropagation：取消事件传递
within：检测事件目标是否是指定对象，如果是则返回true，否则返回false
已出浏览器事件
EventManager提供了un，removeAll和purgeElement这3种移除浏览器事件的方法
1，un
从元素中移除一个事件
Ext.EventManager.un(el,eventname,fn,scope)
el是要移除事件的元素，它可以为元素id，element对象或htmlElement对象
eventname与绑定事件一样，可以为事件名或配置对象，
fn为要移除的事件，如果没有，则无法移除，
scope是函数的作用于，必须与绑定事件时一致，方法un是removeListener的简写
2，removeAll
从元素中移除所有事件
Ext.EventManager.removeAll(el)
el为要移除所有事件的元素
3，purgeElement
使用递归方式移除元素及其子节点的事件
Ext.EventManager.purgeElement（el[,eventname]）
el是要移除事件的元素
eventname是事件的名称，如果不设置则移除所有事件
内部事件对象Ext.util.Event
使用Event对象记录他自己的信息，还提供了绑定时间，移除事件，触发事件和清理缓存或延迟事件等方法，
要注意的是Event对象提供的方法只是框架内部使用的接口，而不是外部接口，因而不哟啊尝试直接使用这些方法
1，addListener
绑定内部事件
2，removeListener
移除事件
3，clearListeners
使用迭代方式停止所有缓存或延时事件
4，Fire
触发事件
为组件增加事件接口：Ext.util.Observable
1,在创建对象中配置listeners属性，2，创建组件后，使用on方法绑定
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
