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 AJAX 用于计算点击率(统计)
Jun 30 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP微信API接口类
2016/08/22 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python爬取个性签名的方法
2018/06/17 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python实现京东秒杀功能
2018/07/30 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
英文求职信范文
2014/05/23 职场文书
踏青活动策划方案
2014/08/19 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
县委务虚会发言材料
2014/10/20 职场文书
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers