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>
View Code
<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>
View Code
键盘导航:Ext.util.KeyNav
KeyNav的作用是封装键盘导航事件,从而轻松的在页面中设置键盘导航。可用的导航包括回车键,空格键,4个方向键,tab键,esc键,pageup,pagedown,del,backspace,home,end
与keymap对象一样,KeyNav也可以通过disabled,enable和setDisabled三个方法开启或关闭其功能
转载于:https://www.cnblogs.com/anbylau2130/p/3585029.html
Extjs学习笔记--(五,事件)相关推荐
- StackExchange.Redis学习笔记(五) 发布和订阅
StackExchange.Redis学习笔记(五) 发布和订阅 原文:StackExchange.Redis学习笔记(五) 发布和订阅 Redis命令中的Pub/Sub Redis在 2.0之后的版 ...
- 好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
- muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor
目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...
- python函数是一段具有特定功能的语句组_Python学习笔记(五)函数和代码复用
本文将为您描述Python学习笔记(五)函数和代码复用,具体完成步骤: 函数能提高应用的模块性,和代码的重复利用率.在很多高级语言中,都可以使用函数实现多种功能.在之前的学习中,相信你已经知道Pyth ...
- Ethernet/IP 学习笔记五
Ethernet/IP 学习笔记五 Accessing data within a device using a non-time critical message (an explicit mess ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 吴恩达《机器学习》学习笔记五——逻辑回归
吴恩达<机器学习>学习笔记五--逻辑回归 一. 分类(classification) 1.定义 2.阈值 二. 逻辑(logistic)回归假设函数 1.假设的表达式 2.假设表达式的意义 ...
- 【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- ROS学习笔记五:理解ROS topics
ROS学习笔记五:理解ROS topics 本节主要介绍ROS topics并且使用rostopic和rqt_plot命令行工具. 例子展示 roscore 首先运行roscore系列服务,这是使用R ...
- Spring Boot 框架学习笔记(五)( SpringSecurity安全框架 )
Spring Boot 框架学习笔记(五) SpringSecurity安全框架 概述 作用 开发示例: 1. 新建项目 2. 引入依赖 3. 编写`SecurityConfig`类,实现认证,授权, ...
最新文章
- 程序员硬核资源:一本贼有趣的设计模式学习pdf
- 修复错误ModuleNotFoundError: No module named ‘pip‘
- ubuntu mysql 5.7_Ubuntu 18.04 安装mysql5.7
- c++ list 修改_Cpython源码阅读17-list自动扩容原理
- 太爽了!宅男醒来后,发现自己变成了……
- java应该怎么学习?
- mongodb转实体对像_营销案例丨实体店走出门面冷清的方法:打造体验式门店
- printf 函数实现的深入剖析
- C语言 文件缓冲区
- swift 笔记 (二十一) —— 高级运算符
- 全能App研发助手!滴滴开源DoraemonKit
- 《实战突击:Java Web项目整合开发》简介及源码
- PDF怎么转换成JPG图片?教你如何快速转换
- 重载运算符高精度算法
- 第4届CCCC字符串大赛 L2-3深入虎穴
- AUTOMATE THE BORING STUFF WITH PYTHON读书笔记 - 第4章:LISTS
- Proximal Gradient for LASSO
- docker之user_remap
- Natbib 参考文献样式
- centos7上安装rar解压软件
热门文章
- 网站建设初学者一定要清楚网站建设基本因素和流程
- linux系统下docker安装,Linux下Docker的安装与使用
- eclipse新建一个java_Eclipse中新建一个java源文件的步骤
- 16年寒假随笔(3)
- CC通信软件list
- python3 RSA 用私钥对随机密钥进行解密
- 关于日志文件的一些处理
- JS 退出系统并跳转到登录界面的实现代码
- 【Obj-C】学习杂记-1
- select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET(转)