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 Object的extend是一个常用的功能
Dec 02 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 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下删除字符串中HTML标签的函数
2008/08/27 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
人机交互程序 python实现人机对话
2017/11/14 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
基于python3生成标签云代码解析
2020/02/18 Python
python实现快递价格查询系统
2020/03/03 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python对一个数向上取整的实例方法
2020/06/18 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Python 串口通信的实现
2020/09/29 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
结婚典礼证婚词
2014/01/11 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2015年银行员工工作总结
2015/04/24 职场文书