extjs 为某个事件设置拦截器


Posted in Javascript onJanuary 15, 2010

我们先来自定义一个事件:

person = function(name) { 
this.name = name; 
this.addEvents("walk"); 
} 
Ext.extend(person, Ext.util.Observable, { 
info: function(event) { 
return this.name + 'is' + event + 'ing.'; 
} 
}); 
var person = new person('张铭诺'); 
person.on('walk', function() { 
Ext.Msg.alert('event', person.name + '在走啊走啊。'); 
});

然后我们再定义一个按钮用来触发这个walk事件:
var btn = new Ext.Button({ 
id: 'walk', 
text: '触发事件按钮', 
renderTo: Ext.getBody() 
}); 
btn.on('click', function() { 
person.fireEvent('walk'); 
});

当点击按钮时触发事件,效果如下图所示:
extjs 为某个事件设置拦截器
现在我们使用capture()函数拦截事件的触发,如下面的代码所示:
var btn2 = new Ext.Button({ 
id: 'cc', 
text: '拦截事件', 
renderTo: Ext.getBody() 
}); 
btn2.on('click', function() { 
Ext.util.Observable.capture(person, function() { 
alert('fsdjhf'); 
return true; 
}); 
});

这时单击btn2按钮,发现弹出对话框后还会触发事件,郁闷。。。。现在将最后一行代码改为return false试试?事件被拦截成功了吧!

这样就给我们一个选择的机会,通过控制capture()中处理函数的返回值来决定是否继续执行某个时间的监听函数,还是直接中止该事件的发生。

我们还可以为一个对象设置多个capture()拦截函数,这些拦截函数会形成一个处理链条,只要其中任何一个拦截函数返回false,就会中止处理过程。

releaseCapture()函数是capture()函数的反向操作,它会一次性清除fireEvent()上所有的拦截函数,不过我们无法通过它准确的删除某一个拦截函数。一旦执行了releaseCapture(),那么之前设置的所有拦截函数就都失效了。

Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
JS中常用的消息框总结
Feb 24 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 #Javascript
javascript 不间断的图片滚动并可点击
Jan 15 #Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 #Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
用jQuery扩展自写的 UI导航
Jan 13 #Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
详解在React里使用"Vuex"
2018/04/02 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
说出一些常用的类,包,接口
2014/09/22 面试题
会计自我鉴定范文
2013/10/06 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
音乐会主持人开场白
2015/05/28 职场文书
2016高考感言
2015/08/01 职场文书
python如何进行基准测试
2021/04/26 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python