Javascript - ExtJs - 事件
事件(ExtJs Event)
Ext.Util.observable类
Ext.Util.observable是一个接口,为Ext组件的事件提供了支持,组件的事件不同于传统事件,所以需要有这么一套事件体系。只有实现了该接口的组件才具有那些特殊的事件。
Ext.EventObjectImpl类
Dom中原始的Event对象被ExtJs封装为Ext.EventObjectImpl。也即在ExtJs中Ext.EventObjectImpl就代表了原始的Event对象,它存储了事件发生时的信息。每个侦听器函数的参数中的那个e正是Ext.EventObjectImpl。
//获取事件发生时,触发事件的对象在文档中的x、y坐标。最后一个方法返回数组,getXY( )[0]得到x坐标,getXY( )[1]得到y坐标
getTarget()
//获取触发事件的源对象
preventDefault(bool)
//是否阻止浏览器默认动作
stopPropagation(bool)
//是否阻止事件冒泡
stopEvent()
//立即停止事件,该方法内部自动调用preventDefault()和stopPropagation()两个函数,取消浏览器的默认操作,同时停止事件冒泡
purgeElement()
//清除该对象上绑定的所有事件
注册侦听
listeners :{
focus:function(){
alert("ssssss")
}
}
//组件渲染完成后在外部注册事件监听
gridPanel.on('itemmouseenter', function () {}
//或
gridPanel.addListener('rowclick', function () {}
批量注册侦听
focus:function(){alert("ssssss")},
click:function(){}
}
var link = Ext.fly("link");
link.on("click", function (e) {
e.preventDefault(true);
Ext.Msg.alert("", "click Event");
}).on("mouseout", function () {
Ext.Msg.alert("", "mouseout Event");
});
在外部批量注册监听
button.on({
mouseover: function () {
//Do something
},
mouseover: function () {
//Do something
}
});
为Dom元素批量注册监听
div.on({
mouseover: function () {
//Do something
},
mouseover: function () {
//Do something
}
});
侦听作用域
通过scope配置事件侦听器的运行环境,因为函数运行在对象上,有时候这个对象可能并非你所期望的对象,此时直接通过配置scope明确指定运行函数的是哪个对象即可。
var btn = new Ext.button.Button({ text: "hello" });
new Ext.window.Window({
title: "widnow",
width: 200,
height: 100,
listeners: {
show: function () {
Ext.Msg.alert("", this.text)//显示按钮的text
},
scope: btn//更改函数执行环境
}
}).show();
});
侦听拦截
通过在绑定了事件的对象上调用suspendEvents()方法预先阻止某个事件,这样,当事件发生时,事件侦听器不会执行。
text: "mouseover",
renderTo: Ext.getBody(),
listeners: {
mouseover: function () { Ext.Msg.alert("", "mouseover Event"); }
}
});
var btn2 = new Ext.button.Button({
text: "挂起",
renderTo: Ext.getBody(),
listeners: {
click: function () {
btn1.suspendEvents();
}
}
});
侦听恢复
通过在绑定了事件的对象上调用resumeEvents()方法恢复被拦截的事件。
text: "mouseover",
renderTo: Ext.getBody(),
listeners: {
mouseover: function () { Ext.Msg.alert("", "mouseover Event"); }
}
});
var btn2 = new Ext.button.Button({
text: "挂起",
renderTo: Ext.getBody(),
listeners: {
click: function () {
btn1.suspendEvents();
}
}
});
var btn2 = new Ext.button.Button({
text: "恢复",
renderTo: Ext.getBody(),
listeners: {
click: function () {
btn1.resumeEvents();
}
}
});
侦听解绑
通过在绑定了事件的对象上调用un()方法可对侦听进行解绑。解绑需要知道侦听器的名字,而通常我们都是使用匿名函数注册事件,想要解绑貌似只有将侦听器写在全局并命名该函数,但还有一个更简单的办法,而为了不在外部写侦听器,可以考虑将侦听器注册在window对象上,便于解绑。
text: "mouseover",
renderTo: Ext.getBody(),
listeners: {
mouseover: window.show = function () { Ext.Msg.alert("", "mouseover Event"); } //解绑侦听需要函数的名字作为参数才能解绑,而为了不在外部写侦听器,可以考虑将侦听器注册在window对象上,便于解绑。
}
});
var btn2 = new Ext.button.Button({
text: "解绑",
renderTo: Ext.getBody(),
listeners: {
click: function () {
btn1.un("mouseover", window.show);
}
}
});
手动触发
title: 'form',
renderTo:Ext.getBody(),
width: 300,
height: 125,
items: [
{ xtype: 'textfield', id: 'text', fieldLabel: '哲学家', listeners: { blur: function () { Ext.Msg.alert("", this.getValue()); } } }
]
});
Ext.get('fire').on('click', function () {
//当id为fire的div被点击时,手工触发下拉框的select事件
var textfield = formPanel.getForm().findField('text');
textfield.fireEvent('blur');
})
Javascript - ExtJs - 事件的更多相关文章
- Javascript - ExtJs - GridPanel组件
GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...
- 63.ExtJs事件(自定义事件、on、eventManager)示例
转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...
- jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...
- javascript的事件
前戏 今天在博客中看到了javascript的事件机制,就自己试试写一个简单的冒泡捕获测试,但是测试结果出乎了我的意料,主要是自己原来对事件了解不是很清楚,现在写篇博客记录下. 基础 先来看一下我在A ...
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
- JavaScript的事件代理(转)
如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...
- [转]javascript指定事件处理程序包括三种方式:
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
随机推荐
- dos下编译java
dos下运行java程序,不借助其他的IDE,即可编译运行java程序. 工具/原料 电脑 方法/步骤 打开开始,运行cmd,进入dos界面. 分别运行java,和javac,检测jd ...
- 自定义数据类型 typedef
其实就是为数据类型起一个别名. typedef unsigned char AGE; //字符类型AGE x; //等价于 unsigned char x; typedef int * IPointe ...
- 使用PreparedStatement 查询一条数据 封装成一个学生的Student1对象
package cn.lijun.entity; public class Student1 { private int id; private String sname; private int g ...
- as依赖解决报错
Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.android.suppor ...
- CatBoost算法和调参
欢迎关注博主主页,学习python视频资源 sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?co ...
- MHA环境搭建
准备工作 数据库架构 角色 ip地址 主机名 server_id Master Slave1 Slave2 配置三台服务器ssh免秘钥认证 ssh-keygen -t rsa ssh-copy-id ...
- python 面向对象(四)反射
####################总结########## 1. isinstance: 判断xxx是否是xxx类型的(向上判断) type: 返回xx对象的数据类型 issubclass: 判 ...
- input:checked + label用法
input:checked ~ label :相邻同胞选择器,选择被选中的input标签后 所有的label标签[input 和 label标签有共同的父元素]: input:checked + ...
- VirtualBox安装Ubuntu14.04
创建虚拟机 点击 新建(N) 设置虚拟机的名称,类型与版本,如下图所示: 分配虚拟机的内存大小,受PC实际内存影响,暂时设置为2G,如下图所示: 分配虚拟机的硬盘大小,默认即可,如下图所示: 分配虚拟 ...
- Docker 从入门到放弃(一)安装
前言 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任 ...