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方法绑定
为组件触发事件
--使用fireEvent方法触发事件
为组件移除事件
--如果组件存在浏览器事件，则移除事件时同时移除浏览器事件，该操作会使用到Observable对象的removeManagedListener方法
特定功能的事件对象
DelayedTask 对象只要勇于实现输入缓冲的功能，在指定的事件间隔内，如果用户没有处罚事件，就会执行实际触发函数
DelayedTask对象提供了一下两个方法：
cancel：取消最后的队列任务
delay：取消当前的任务，开始一个新的任务
一般任务：Ext.util.TaskRunner与Ext.TaskManager
taskManager对象时TaskRunner对象的一个实例，因而可以直接使用TaskManager对象执行任务
run:任务出发时执行的函数
interval：触发任务的时间间隔，单位是毫秒
args：可选，为传递给触发函数的参数数组
scope：可选，触发函数的作用域
duration：可选，任务运行事件超过该值指定的时间后，任务会自动停止，其单位为毫秒
repeat：可选，为任务可执行的次数，超过此指定的次数，任务会 自动停止
TaskRunner对象提供了Start，stop，stopAll三个方法操作任务
封装好的单机事件：Ext.util.ClickRepeater
封装单机事件的作用是简化代码的书写
ClickRepeater对象时从Observable对象继承的对象因而拥有Observable对象的所有成员
它也定义了自己独有的配置项
pressCls：单机时应用在元素上的样式名称，可实现特殊效果
accelerate：布尔值，如果true，interval和delay配置项会被忽略，操作会慢慢开始并逐渐加速
delay：在该值指定时间后才会再次出发事件
interval：指定触发事件之间的间隔，默认值是20毫秒
listeners；可选，为对象，可为事件配置对象，可在这里绑定事件
preventDefault：布尔值，如果未true，组织默认的单机事件
stopDefault：布尔值，如果未true，停止默认的单击事件
键盘事件
为元素绑定键盘事件：Ext.util.KeyMap
KeyMap 对象可以为元素设置一些按键，从而实现一些特殊功能，例如，可以在工具栏的按钮上增加向下箭头的按键，让他打开子菜单
要使用KeyMap对象，可以在创建实例时定义好配置对象或者配置对象数组，也可以在创建后使用addBinding方法来增加，配置对象主要有一下配置项：
key：触发事件的键盘代码。可以是单一的键盘代码，也可以是键盘代码数组
shift：布尔值，为true时，可实现与shift键一起的组合键功能
alt：布尔值，为true时，可以实现与alt键一起的组合键功能
ctrl：布尔值，为true时，可以实现与ctrl键一起的组合键功能
handler（fn）：事件的触发函数，fn为别名
scope：触发函数的作用域
defaultEventAction：事件的默认操作。可以设置为stopEvent，stopPropagation和 preventDefault,如果不设置则没有默认操作
可以使用disable,enable和setDisabled开启KeyMap对象，而方法isEnable可返回KeyMap的状态，如果为开启状态，返回true
Demo--给html增加enter键按下，焦点改变事件
<!DOCTYPE html>
<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>
<style>
#form1 span{ height: 30px;width: 200px;display: block;}
</style> </head>
<body>
<div style="margin:20px 0 0 20px">
<form id="form1"> <span>姓名：<input name="name" type="text" value=""/></span>
<span>性别：<input name="sex" type="radio" value="男"/>男<input name="sex" type="radio" value="女"/>女</span>
<span>电子邮件：<input type="text" name="email" value=""/></span>
<span>个人简介：<textarea name="itro"></textarea></span> </form> </div>
<script type="text/javascript">
var els = Ext.query("#form1 input,textarea");
Ext.create("Ext.util.KeyMap", "form1", {
key: 13,
fn: function (key, e) {
var el = e.target, target = els, ln = target.length;
for (var i = 0; i < ln; i++) {
if (target[i] == el) {
if (i + 1 == ln) {
target[0].focus();
} else {
target[i + 1].focus();
}
}
}
},
scope: Ext.getDom("form1")
});
</script>
</body>
键盘导航：Ext.util.KeyNav
KeyNav的作用是封装键盘导航事件，从而轻松的在页面中设置键盘导航。可用的导航包括回车键，空格键，4个方向键，tab键，esc键，pageup，pagedown，del，backspace，home，end
与keymap对象一样，KeyNav也可以通过disabled，enable和setDisabled三个方法开启或关闭其功能
Extjs学习笔记--（五，事件）的更多相关文章
- muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor
目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- C#可扩展编程之MEF学习笔记(五)：MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- （转）Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记五：类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- python3.4学习笔记(五) IDLE显示行号问题，插件安装和其他开发工具介绍
python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍 IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.pycharm免费社区版.Su ...
- Go语言学习笔记五： 条件语句
Go语言学习笔记五: 条件语句 if语句 if 布尔表达式 { /* 在布尔表达式为 true 时执行 */ } 竟然没有括号,和python很像.但是有大括号,与python又不一样. 例子: pa ...
随机推荐
- sass的学习笔记
sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...
- java中Logger.getLogger(Test.class)
java中Logger.getLogger(Test.class) log4的使用方法: log4是具有日志记录功能,主要通过一个配置文件来对程序进行监测有两种配置方式:一种程序配置,一种文件配置有三 ...
- LeetCode: Max Points on a Line 解题报告
Max Points on a Line Given n points on a 2D plane, find the maximum number of points that lie on the ...
- 【转载】LeetCode 题目总结/分类
引自:http://www.douban.com/note/330562764/ 注:此分类仅供大概参考,没有精雕细琢.有不同意见欢迎评论~ 利用堆栈:http://oj.leetcode.com/p ...
- emWin教程目录汇总
目录 第一章: 当前主流的小型嵌入式 GUI 第2章 初学 emWin 的准备工作及其快速上手
- tipask 不能正常解析
<? if(!defined('IN_TIPASK')) exit('Access Denied'); include template('header'); ?> 代码如上,经查询为ph ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- log4j日志pattern配置
c category的名称,可使用{n}限制输出的精度.例如:logger名为"a.b.c",%c{2}将输出"b.c". C 产生log事件的java完全限定 ...
- MVC出现错误：系统找不到指定文件(异常来自 HRSULT:0x80070002)
vs2013创建Web应用程序MVC出现错误:系统找不到指定文件(异常来自 HRSULT:0x80070002) 查到博客园VS2013新建Web Application时报错Exception fr ...
- 字符串移位：如“abcdefghi”右移2位后变成“cdefghiab”
函数头: //pStr 是指向以'\0'结尾的字符串指针 //steps 是要求移动的步数 void LoopMove(char *pStr, int steps) { //...... } 使用库函 ...