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 相关文章推荐
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
实例讲解React 组件
Jul 07 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
利用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
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
详解Python中where()函数的用法
2018/03/27 Python
Python 从相对路径下import的方法
2018/12/04 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
中学生英语演讲稿
2014/04/26 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书