javascript的事件我们用的最多的就是用于表单验证
现在我们来看一下一个button按钮事件的写法
最简单的直接写入标签中
常用的事件绑定写法
我们也可以将事件方法单提出来,这种写法更有利于方法的重用
下面我们来看看ext强大的事件机制
Ext.util.Observable : 支持事件相应的组件或元素都继承于该类。只有继承该类的子类才会拥有事件响应功能。
下面我们来用Ext实现一下类的继承
extend第三个参数的具体用法如下
有一个问题 如果父类中定义了一个方法
这个是与js的对象创建有关
由于我是采用new SubClass();但是子类并没有实际对父类进行初始化,所以我们应该强制调用父类的构造函数进行父类的初始化创建
这样我们才算完成了一个完整的继承
我们已经了解了继承,下面我们定义一个对象来继承Ext.util.Observable,定义事件
要实现事件的响应功能 这个类必须继承Observable
下面我们来对一个html页面元素进行事件的绑定操作
也可以用Ext.EventManager进行事件的绑定
注意如果绑定两个事件,注意先后顺序,这里先触发hello2然后触发hello
我们让稍微改变一下hello方法
这里弹出了el的id的值"abc"
如果我们将el.addListener("click",hello)中添加一个参数变成
el.addListener("click",hello,this)
很奇怪 alert出的竟是ext-gen1,这是为什么呢?
主要是addListener中有四个参数,前两个参数已经很明白了
第三个参数是scope(作用域),在不加参数的时候hello方法中的this表示的是真正作用于事件中的对象,el.addListener("click",hello,this)中的this表示的是这个方法所在的对象即匿名类(将这个对象传进后)
function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
el.addListener("click",hello,this)
}
该对象是Ext创建的所以Ext会自动为改对象创建一个id,因为将这个对象传进去了所以hello方法中的this就变成该匿名类的对象了,其id属性自然也跟着转变了。
下面清楚的显示出作用域的含义
这里将弹出hello,如果el.on("click",onClick,this);去掉this那么onClick事件中的this就是el自身,实际上onClick中的this表示的就是scope传过来的对象指针,如果不传则代表自身
Observable中的listener
下面我们来看一下第四个参数包括
scope :作用域
delay :响应函数的延迟时间(毫秒)
single :是否只执行一次
buffer :函数的延迟(在延迟之中不会再次响应)
需要注意delay和buffer不能同时应用,还有就是scope同第三各参数冲突
多个事件可以依次绑定,不过也可以在同一个on方法下绑定
还可以在on方法下这样绑定
Ext.EventObject :浏览器标准事件类
我们将a标签上添加一个点击事件
<a href="http://www.g.cn" id="g">谷歌</a>
我们发现 他是先alert出我们定义的事件 然后又完成了跳转
现在我们不希望他进行跳转 怎么做呢?
首先实际在方法调用的时候是隐士的传递过去了一个EventObject
我们已近看到了 他确实可以获取eventObject
他有一个阻止事件继续发生的方法stopEvent
我们可以通过该方法阻止他的后续事件发生
这样就不会继续进行页面跳转了。
下面我们见一下例子 window事件使用的例子
现在我们来看一下一个button按钮事件的写法
最简单的直接写入标签中
<input type="button" name="abc" id="abc" value="abc" onclick="alert('abc');"/>
<br/>
<a href="http://www.g.cn">谷歌</a>
常用的事件绑定写法
<script>
window.onload = function(){
var el = document.getElementById("abc");
el.onclick = function(){
alert("abc");
}
}
</script>
<input type="button" name="abc" id="abc" value="abc"/>
<br/>
<a href="http://www.g.cn">谷歌</a>
我们也可以将事件方法单提出来,这种写法更有利于方法的重用
<script>
window.onload = function(){
fc = function(){
alert("abc")
};
var el = document.getElementById("abc");
el.onclick = fc;
el.onmouseover = fc;
}
</script>
<input type="button" name="abc" id="abc" value="abc"/>
<br/>
<a href="http://www.g.cn">谷歌</a>
下面我们来看看ext强大的事件机制
Ext.util.Observable : 支持事件相应的组件或元素都继承于该类。只有继承该类的子类才会拥有事件响应功能。
下面我们来用Ext实现一下类的继承
//定义一个父类
BaseClass = function(){
}
//定义父类的属性及方法
BaseClass.prototype.name = "";
BaseClass.prototype.say = function(){
alert("hello" + this.name);
}
//定义一个子类
SubClass = function(){
//在子类中定义一个方法,使用this指定作用域,不能省略
this.hello = function(){
alert("hello subclass");
};
}
//使用Ext进行继承,可以接受三个参数(子类,父类,重载的方法(配置选项的数组))
Ext.extend(SubClass,BaseClass);
//新建一个子类
var sub = new SubClass();
sub.hello();
//子类已经拥有了父类的方法了
sub.say();
extend第三个参数的具体用法如下
Ext.extend(SubClass,BaseClass,{
//子类重新定义了父类方法
say:function(){
alert("hello say");
},
//子类扩展的一个方法
walk:function(){
alert("i walking");
}
});
//新建一个子类
var sub = new SubClass();
sub.hello();
//子类已经拥有了父类的方法了
sub.say();
sub.walk();
有一个问题 如果父类中定义了一个方法
BaseClass = function(){
this.jump = function(){
alert("jump");
}
}
BaseClass.prototype.name = "";
BaseClass.prototype.say = function(){
alert("hello" + this.name);
}
SubClass = function(){
this.hello = function(){
alert("hello subclass");
};
}
//使用Ext进行继承,可以接受三个参数(子类,父类,重载的方法(配置选项的数组))
Ext.extend(SubClass,BaseClass,{
say:function(){
alert("hello say");
},
walk:function(){
alert("i walking");
}
});
//新建一个子类
var sub = new SubClass();
sub.hello();
//子类已经拥有了父类的方法了
sub.say();
sub.walk();
//该方法并不会被调用
sub.jump();
这个是与js的对象创建有关
由于我是采用new SubClass();但是子类并没有实际对父类进行初始化,所以我们应该强制调用父类的构造函数进行父类的初始化创建
//定义一个父类
BaseClass = function(){
this.jump = function(){
alert("jump");
}
}
//定义父类的属性及方法
BaseClass.prototype.name = "";
BaseClass.prototype.say = function(){
alert("hello" + this.name);
}
//定义一个子类
SubClass = function(){
//强制调用父类的构造方法,对父类初始化
SubClass.superclass.constructor.call(this);
//在子类中定义一个方法,使用this指定作用域,不能省略
this.hello = function(){
alert("hello subclass");
};
}
//使用Ext进行继承,可以接受三个参数(子类,父类,重载的方法(配置选项的数组))
Ext.extend(SubClass,BaseClass,{
say:function(){
alert("hello say");
},
walk:function(){
alert("i walking");
}
});
//新建一个子类
var sub = new SubClass();
sub.hello();
//子类已经拥有了父类的方法了
sub.say();
sub.walk();
sub.jump();
这样我们才算完成了一个完整的继承
我们已经了解了继承,下面我们定义一个对象来继承Ext.util.Observable,定义事件
Employee = function(){
//定义一个事件名
this.addEvents("eve");
}
Ext.extend(Employee,Ext.util.Observable);
//定义一个事件操作
todo = function(){
alert("我要去做一件事");
}
var em = new Employee();
//将事件名称与事件操作绑定
em.on("eve",todo);
//通过名称触发具体事件行为
em.fireEvent("eve");
要实现事件的响应功能 这个类必须继承Observable
下面我们来对一个html页面元素进行事件的绑定操作
<html>
<head>
<title>index.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
//该属性返回undefine因为ExtElement不存在该属性
//alert(el.value);
//var htmlel = Ext.getDom("div");
//alert(htmlel.innerHTML);
/**
* document.getElementById("id")返回的是html的Element
* 也可以通过Ext.getDom("id")方式获得
* 需要注意ExtElement对象和HtmlElement对象的区别
* 比如.innerHTML属性在ExtElement中就不存在
*/
//之前我们用on进行事件的绑定,实际上on是addListener的缩写
el.addListener("click",hello)
/**
* 由于el是html元素所以自身就有click事件,而且可以自身接受触发
* 触发的时候就会调用hello方法
* 实际就是设置一个监听,在el元素的click事件上
*/
});
hello = function(){
alert("hello");
}
</script>
</head>
<body>
<input type="button" name="abc" id="abc" value="abc" />
<br/>
<a href="http://www.g.cn">谷歌</a>
<br/>
<div id="div">abc</div>
</body>
</html>
也可以用Ext.EventManager进行事件的绑定
Ext.onReady(function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
//我们也可以通过Ext.EventManager来设置监听器
Ext.EventManager.addListener(el,"click",hello);
Ext.EventManager.addListener(el,"mouseover",hello2);
});
hello = function(){
alert("hello");
};
hello2 = function(){
alert("hello2");
}
注意如果绑定两个事件,注意先后顺序,这里先触发hello2然后触发hello
el.addListener("click",hello)
el.addListener("click",hello2)
我们让稍微改变一下hello方法
Ext.onReady(function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
el.addListener("click",hello)
});
hello = function(){
//alert("hello");
alert(this.id);
};
这里弹出了el的id的值"abc"
如果我们将el.addListener("click",hello)中添加一个参数变成
el.addListener("click",hello,this)
很奇怪 alert出的竟是ext-gen1,这是为什么呢?
主要是addListener中有四个参数,前两个参数已经很明白了
第三个参数是scope(作用域),在不加参数的时候hello方法中的this表示的是真正作用于事件中的对象,el.addListener("click",hello,this)中的this表示的是这个方法所在的对象即匿名类(将这个对象传进后)
function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
el.addListener("click",hello,this)
}
该对象是Ext创建的所以Ext会自动为改对象创建一个id,因为将这个对象传进去了所以hello方法中的this就变成该匿名类的对象了,其id属性自然也跟着转变了。
下面清楚的显示出作用域的含义
Ext.onReady(function(){
function AA(){
this.first = "hello";
var el = Ext.get("abc");
//这里this是AA的实力
el.on("click",onClick,this);
}
//实例化
new AA();
});
onClick = function(){
alert(this.first);
}
这里将弹出hello,如果el.on("click",onClick,this);去掉this那么onClick事件中的this就是el自身,实际上onClick中的this表示的就是scope传过来的对象指针,如果不传则代表自身
Observable中的listener
下面我们来看一下第四个参数包括
scope :作用域
delay :响应函数的延迟时间(毫秒)
single :是否只执行一次
buffer :函数的延迟(在延迟之中不会再次响应)
需要注意delay和buffer不能同时应用,还有就是scope同第三各参数冲突
Ext.onReady(function(){
function AA(){
this.first = "hello";
var el = Ext.get("abc");
el.on("click",onClick,this,{
delay:1000,
single:true,
//buffer:1000
});
}
//实例化
new AA();
});
onClick = function(){
alert(this.first);
}
多个事件可以依次绑定,不过也可以在同一个on方法下绑定
Ext.onReady(function(){
function AA(){
this.first = "hello";
var el = Ext.get("abc");
el.on({
click:onClick,
mouseover:onClick,
scope:this
})
}
//实例化
new AA();
});
onClick = function(){
alert(this.first);
}
还可以在on方法下这样绑定
el.on({
click:{
delay:1000,
fn:onClick,
scope:this
},
mouseover:{
delay:1000,
fn:onClick
}
})
Ext.EventObject :浏览器标准事件类
我们将a标签上添加一个点击事件
<a href="http://www.g.cn" id="g">谷歌</a>
Ext.onReady(function(){
var el = Ext.get("g");
el.on("click",onClick);
});
onClick = function(){
alert(this.id);
}
我们发现 他是先alert出我们定义的事件 然后又完成了跳转
现在我们不希望他进行跳转 怎么做呢?
首先实际在方法调用的时候是隐士的传递过去了一个EventObject
onClick = function(e){
var htmlel = e.getTarget();//返回事件发生的htmlElement
alert(htmlel.innerText);
}
我们已近看到了 他确实可以获取eventObject
他有一个阻止事件继续发生的方法stopEvent
我们可以通过该方法阻止他的后续事件发生
onClick = function(e){
var htmlel = e.getTarget();
alert(htmlel.innerText);
e.stopEvent();
}
这样就不会继续进行页面跳转了。
下面我们见一下例子 window事件使用的例子
Ext.onReady(function(){
var win = new Ext.Window({
title:'hello',
html:"hello world!",
width:300,
height:300
})
win.show();
win.on("move",moving);//move方法会自动传递过去三个参数,具体见window文档
});
moving = function(c,x,y){
alert(c.id+" "+x+" "+y);
}