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 相关文章推荐
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JavaScript知识点整理
Dec 09 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
javascript常用的设计模式
Feb 09 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
三种php连接access数据库方法
2013/11/11 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
jQuery 技巧小结
2010/04/02 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python线程join方法原理解析
2020/02/11 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
工程承包协议书范本
2014/09/29 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers