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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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实现框架(二)
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php获取文件大小的方法
2014/02/26 PHP
php的dl函数用法实例
2014/11/06 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python简单实现enum功能的方法
2016/04/25 Python
python2.7到3.x迁移指南
2018/02/01 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python实现简单五子棋游戏
2019/06/18 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
2014年组织部工作总结
2014/11/14 职场文书
微观世界观后感
2015/06/10 职场文书