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实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python中求对数方法总结
2020/03/10 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
中间件分为哪几类
2016/09/18 面试题
竞聘书怎么写,如何写?
2014/03/31 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang