JS注册/移除事件处理程序(ExtJS应用程序设计实战)


Posted in Javascript onMay 07, 2013

在设计ExtJS应用程序时最常做的事情就是注册事件处理程序,因为在ExtJS的世界里,几乎完全由时间组成。因此,ExtJS的设计者使注册事件变得非常容易(同时还提供了非常不容易的方式任你选择)——on/un,也就是上与下两种方式,或是addListener与removeListener,Element的所有子类都可以使用。例如有一个<div/>希望在用户按下时能够给予简单的反馈:
<divid="happyDiv"class="happyStyle"/>
如何替这个<div/>注册鼠标单击事件呢?首先必须取得这个div的Element实例:
varhappyDiv=Ext.get('happyDiv');
然后是定义事件处理程序:

varclickHandler=function(event,eventTarget){ 
Ext.MessageBox.alert("Click","Youclicked:"+eventTarget.id); 
}

再用on()将事件处理函数与Element实例连接起来:
happyDiv.on('click',clickHandler);

程序执行时,单击<div/>会出现图3-15所示的结果。JS注册/移除事件处理程序(ExtJS应用程序设计实战)
很简单,对吧?示例文件为ch03/event_demo.html。如果要移除这个事件处理程序,只需要把on()改为un()即可。移除时没有对应click事件的事件处理程序也没有关系,底层的EventManager会自行判断。事件处理程序被调用时会接收三个参数——event、eventTarget和optionObj,示例中只用到两个,第三个参数会在讨论EventManager时加以说明。这里先将焦点放在event与eventTarget上,event的类型是Ext.Event,eventTarget则是HTML元素。浏览器在用户按下<div/>时触发click事件并且调用clickHanlder(),对于clickHanlder()而言,接收到的event就是浏览器触发的click事件。evnetTarget就是事件目标,也就是<div/>,eventTarget.id的值就是“happyDiv”。至于事件的根类,应该去哪里寻找呢?答案
Javascript 相关文章推荐
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 #Javascript
基于JavaScript 类的使用详解
May 07 #Javascript
解读JavaScript中 For, While与递归的用法
May 07 #Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 #Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 #Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 #Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 #Javascript
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
长波有什么东西
2021/03/01 无线电
PHP函数常用用法小结
2010/02/08 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php创建无限级树型菜单
2015/11/05 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python线程指南详细介绍
2017/01/05 Python
python并发编程之线程实例解析
2017/12/27 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
对python中的logger模块全面讲解
2018/04/28 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
预备党员入党自我评价范文
2014/03/10 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL