[07]EXTJS4.0的事件机制Event

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_34153893

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/gzzjsoft/1069908

版权

1.事件的3种绑定方式

HTML/DHTML

DOM

EXTJS

2.Ext.util.Observable 事件的基类

它为所有支持事件机制的extjs组件提供事件的支持

如果我们自己创建新的组件需要有事件的支持那么我们就继承它

事件的分类

标准事件[键盘按钮按下，鼠标的单击双击，滑过滑动]

业务事件[当面板收起的时候触发，当组件被销毁的时候触发，当每一个对象的属性值不为空的时候触发]

一个自定义事件的例子

没有用到事件处理的场景

母亲问孩子饿不饿--->

<----孩子

饿了-->给一瓶牛奶

不饿-->不给

用了事件的场景

母亲给孩子一瓶牛奶-->

孩子拿到牛奶感觉饿了就喝

感觉不饿就不喝

角色功能分析：

孩子：应该有自己能拿到牛奶判断饿不饿的方法，当母亲给他牛奶的时候调用这个方法。

那么孩子就要有一个业务事件时刻监听母亲什么时候给自己牛奶

母亲：调用孩子拿牛奶的方法，并且传入一瓶牛奶

3.addManagedListener 收管制的监听

它是由调用的组件管理的，当组件执行了销毁命令的时候所有被组件管制的事件全部销毁

4.relayEvents 事件的分发和传播(控制实现事件在不同控件或对象的传播)

比如孩子喝完三鹿就去医院，老爸就要带着去医院

5.事件对象Ext.EventObject

不是一个单例，不能被直接new出来，它会存活在事件处理函数中

6.事件管理器Ext.EventManager

它可以更方便地为页面元素绑定事件处理函数

方法：addListener 为元素增减事件

---------------------------------------------------------------------------------------

这个例子主要讲第一种事件绑定方式

lesson7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript">
function hello(){
console.log('hello world');
}
</script>
</head>
<body>
<input type="button" id="btn1" value="第一种事件绑定方式" onClick="hello()"/>
</body>
</html>

运行结果如下(点击界面的按钮之后)：

hello world

---------------------------------------------------------------------------------------

这个例子主要讲IE下的事件绑定方式

evemntBinding.js

(function(){
Ext.onReady(function(){
document.getElementById("btn1").attachEvent("onclick",function(){
alert("第二种事件绑定方式");
});
});
})();

lesson7_2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="evemntBinding.js"></script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="第二种事件绑定方式"/>
</body>
</html>

运行结果如下：

弹出：“第二种事件绑定方式“

------------------------------------------------------------------------------------

这个例子主要讲FIREFORX，chrome下的事件绑定方式

evemntBinding2.js

(function(){
Ext.onReady(function(){
document.getElementById("btn1").addEventListener("click",function(){
console.log("第二种事件绑定方式");
});
});
})();

lesson7_3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="evemntBinding2.js"></script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="第二种事件绑定方式"/>
</body>
</html>

运行结果如下：

第二种事件绑定方式

-------------------------------------------------------------------------------------

这个例子主要讲Ext.isIE

evemntBinding3.js

(function(){
Ext.onReady(function(){
if(!Ext.isIE){
document.getElementById("btn1").addEventListener("click",function(){
console.log("第二种事件绑定方式");
});
}else{
document.getElementById("btn1").attachEvent("onclick",function(){
alert("第二种事件绑定方式");
});
}
});
})();

lesson7_3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="evemntBinding3.js"></script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="第二种事件绑定方式"/>
</body>
</html>

运行结果如下：

第二种事件绑定方式

---------------------------------------------------------------------------------------这个例子主要讲第三中绑定事件的方式

evemntBinding4.js

(function(){
Ext.onReady(function(){
Ext.get('btn1').on("click",function(){
alert("第三种事件绑定方式");
});
});
})();

lesson7_4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="evemntBinding4.js"></script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="第三种事件绑定方式"/>
</body>
</html>

运行结果：

弹出如下内容：

第三种事件绑定方式

-----------------------------------------------------------------------------------

这个例子主要讲Ext.util.Observable和其中的addListener和fireEvent

customEvent.js

(function(){
Ext.onReady(function(){
Ext.define("children",{
extend:'Ext.util.Observable',
constructor:function(){
this.callParent(arguments);//课程中没有这句话，如果没有的话是会报错误
this.state = "hungry",//目前所属的状态 hungry full
this.setMilk = function(milk){
this.fireEvent('hungry',milk);
},
this.addListener("hungry",function(milk){
if(this.state == 'hungry'){
this.drink(milk);
}else{
console.log("我不饿");
}
}),
this.drink = function(milk){
console.log("我喝掉了一瓶牛奶： " + milk);
}
}
});
var children = Ext.create("children",{});
//母亲调用孩子的接受牛奶的方法
children.setMilk('三鹿牛奶');
});
/**
* 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发这个事件的动作fireEvent
*/
})();

运行结果如下：

我喝掉了一瓶牛奶：三鹿牛奶

-----------------------------------------------------------------------------

这个例子主要讲Ext.util.Observable.capture方法，即事件的捕获，拦截掉孩子对这个事件的执行

customEvent2.js

(function(){
Ext.onReady(function(){
Ext.define("children",{
extend:'Ext.util.Observable',
constructor:function(){
this.callParent(arguments);//课程中没有这句话，如果没有的话是会报错误：
this.state = "hungry",//目前所属的状态 hungry full
this.setMilk = function(milk){
this.fireEvent('hungry',milk);
},
this.addListener("hungry",function(milk){
if(this.state == 'hungry'){
this.drink(milk);
}else{
console.log("我不饿");
}
}),
this.drink = function(milk){
console.log("我喝掉了一瓶牛奶： " + milk);
}
}
});
var children = Ext.create("children",{});//本对象是牛奶过敏的对象
Ext.util.Observable.capture(children,function(eventName){
if(eventName == "hungry"){
console.log("这个孩子牛奶过敏不能喝牛奶...");
return false;
}else{
return true;
}
});
//母亲调用孩子的接受牛奶的方法
children.setMilk('三鹿牛奶');
});
})();

运行结果如下：

这个孩子牛奶过敏不能喝牛奶...

-------------------------------------------------------------------------------------

这个例子主要讲事件分发relayEvents

relayEvent.js

(function(){
Ext.onReady(function(){
Ext.define("children",{
extend:'Ext.util.Observable',
constructor:function(){
this.callParent(arguments);//课程中没有这句话，如果没有的话是会报错误：
this.state = "hungry",//目前所属的状态 hungry full
this.setMilk = function(milk){
this.fireEvent('hungry',milk);
},
this.addListener("hungry",function(milk){
if(this.state == 'hungry'){
this.drink(milk);
}else{
console.log("我不饿");
}
}),
this.drink = function(milk){
console.log("我喝掉了一瓶牛奶： " + milk);
}
}
});
var children = Ext.create("children",{});
//父类没有声明过任何监听事件
Ext.define("father",{
extend:'Ext.util.Observable',
constructor:function(config){
this.listeners = config.listeners;
this.superclass.constructor.call(this,config);
}
});
var father = Ext.create("father",{});
father.relayEvents(children,['hungry']);//事件从孩子这端执行完就留到父亲
father.on("hungry",function(){
console.log("送喝了三鹿的孩子去医院..");
});
var father = Ext.create("father",{});
//母亲调用孩子的接受牛奶的方法
children.setMilk('三鹿牛奶');
});
})();

运行结果：

我喝掉了一瓶牛奶：三鹿牛奶

送喝了三鹿的孩子去医院..

------------------------------------------------------------------------------

这个例子主要讲addManagedListener

manageListener.js

(function(){
Ext.onReady(function(){
var tbar = Ext.create("Ext.toolbar.Toolbar",{
renderTo:Ext.getBody(),
width:500,
items:[
{xtype:'button',id:'create',text:'create'},
{xtype:'button',id:'delete',text:'delete'},
{xtype:'button',text:'销毁删除按钮',handler:function(){
var c = Ext.getCmp("delete");//不是页面上的元素的按钮
if(c){
c.destroy();
}
}}
]
});
var deleteB = Ext.getCmp("delete");
//删除了delete按钮之后，create按钮的事件也删除了
deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
console.log("添加操作");
});
});
})();

-------------------------------------------------------------------------------------

这个例子主要讲事件对象

EventObject.js

Ext.onReady(function(){
var b = Ext.get("btn");//Ext.get获取DOM中元素
b.on("click",function(e){
console.log(e);
console.log(e.getPageX());
});
});

lesson7EventObject.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="EventObject.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
</html>

运行结果如下：

constructor {browserEvent: MouseEvent, type: "click", button: 0, shiftKey: false, ctrlKey: false…}

------------------------------------------------------------------------------

这个例子主要讲Ext.EventManager.addListener

eventmanager.js

Ext.onReady(function(){
Ext.EventManager.addListener("btn",'click',function(){
console.log("通过事件管理器进行事件的监听注册");
});
});

lesson7EventManager.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="eventmanager.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
</html>

运行结果：

通过事件管理器进行事件的监听注册

111111

转载于:https://blog.51cto.com/gzzjsoft/1069908

weixin_34153893

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[07]EXTJS4.0的事件机制Event

1.事件的3种绑定方式 HTML/DHTML DOM EXTJS2.Ext.util.Observable 事件的基类它为所有支持事件机制的extjs组件提供事件的支持如果我们自己创建新的组件需要有事件的支持那么我们就继承它事件的分类标准事件[键盘按钮按下，鼠标的单击双击，滑过滑动]...
复制链接

扫一扫