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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
javascript常用的设计模式
Feb 09 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
深入了解Vue动态组件和异步组件
Jan 26 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
注塑工厂厂长岗位职责
2013/12/02 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
有关环保的标语
2014/06/13 职场文书
应届大学生求职信
2014/07/20 职场文书
ktv好的活动方案
2014/08/17 职场文书
工伤私了协议书范本
2014/11/24 职场文书
初中优秀学生评语
2014/12/29 职场文书
团员个人总结
2015/02/26 职场文书
运动会1000米加油稿
2015/07/21 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL