Extjs2.0---事件处理

Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能

1.先看一个简单点的例子

//Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能

Employee = function(){
	this.addEvents("test");//注册事件,该事件名字为：test
}

Ext.extend(Employee,Ext.util.Observable);

todo = function(){
	alert("event was fired");
}

var em = new Employee();
em.on("test",todo);//将方法绑定到事件test上
em.fireEvent("test");//触发事件test

2.
页面代码：

<input type="button" name="button1" id="button1" value="button1" />

js代码：

todo = function(){
	alert("event was fired");
}

//window.onload = function(){}等价于Ext.onReady(function(){});页面加载完后就执行该函数
Ext.onReady(function() {
		//返回的button1是Observable的子类，所以具有事件处理功能
		var button1 = Ext.get("button1");//返回的Element对象,不等价于document.getElementById("button1")
//		var button1 = Ext.getDom("button1");//返回的HTMLElement对象,等价于document.getElementById("button1");
		
		alert(button1.id);//button1
		
//		button1.addListener("click",todo);//addListener与on是一样
//		button1.addListener("mouseover",todo);
		
		
		//通过EventManager来实现
		Ext.EventManager.addListener(button1,"click",todo);
		Ext.EventManager.addListener(button1,"mouseover",todo);
		
	}
)

3.

todo = function(){
	alert(this.id);//此处的this由addListener的第3个参数决定
}


Ext.onReady(function() {
		//返回的button1是Observable的子类，所以具有事件处理功能
		var button1 = Ext.get("button1");
		
		//先打印出button1,再打印出ext-gen1,刚好与addListener添加的顺序相反
		button1.addListener("click",todo,this);//todo函数打印出:ext-gen1
		button1.addListener("click",todo,button1);//todo函数打印出:button1
	}
)

4.

todo = function(){
	alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function(){
		var button1 = Ext.get("button1");
		//addListener的第4个参数是个配置选项，所以需要用{},有4个配置选项，delay(触发事件多久后执行指定的函数),scope(如果第3个参数设置了,此处可以省),single(事件触发一次后，就被移走，以后再触发该事件无效),buffer（缓存区，也就是多长时间内触发该事件大于1次都认为是1次）
		//delay和buffer同时使用时有错误，具体原因还不知道是为什么?
		button1.addListener("click",todo,button1,{delay:3000,single:false});//因为button1也属于Observable类的子类，所以查看文档时可以直接查看Observable中的addListener方法
	}
)

5.

//window.onload = function(){}等价于Ext.onReady(function(){});  页面加载完后就执行该函数
Ext.onReady(function(){
		alert("ok1");
		function AA(){
			alert("ok2");
		}
	}
)
//只会打印出ok1,ok2不会被打印出来。因为页面加载完后会去执行函数function()，但是function()函数里的函数(或叫类)AA则不会去执行的。

Ext.onReady(function(){
		alert("ok1");
		function AA(){
			alert("ok2");
		}
		new AA();
	}
)

//这样ok1和ok2都会被打印出来，因为new AA()去调用了

6.等价写法：

todo = function(){
	alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function(){
		var button1 = Ext.get("button1");
		
		//第一种写法
//		button1.addListener("click",todo,button1);
//		button1.addListener("mouseover",todo,button1);
		
		//第二种写法
//		button1.on({click:todo,mouseover:todo,scope:button1});

		//第三种写法
		button1.on(
			{
				click:{scope:button1,delay:3000,fn:todo},
				mouseover:{scope:button1,delay:1000,fn:todo}
			}
		);
		
		
		
	}
)

7.

Ext.onReady(
	function(){
		alert("ok1");//ok1
		AA = function(){
			alert("ok2");//ok2		
		};
		//同时定义多个属性和方法
		AA.prototype = {
			aa:1,
			bb:2,
			a:function(){
				alert("aa");//因为没有调用，所以不会打印出来
			},
			b:function(){
				alert("bb");//因为没有调用，所以不会打印出来
			}
		}
		new AA();
		
	}
)

8.事件处理EventObject

Ext.onReady(function(){
	var win = new Ext.Window({
		title:'hello',
		html:'world',
		width:400,
		height:300
	});
	win.show();
	//查看Extjs的文档：Ext.Window中的Public Events部分查看到:move : ( Ext.Component this, Number x, Number y ) ,默认3个参数，所以才有得下面函数的c,x,y
	win.on("move",moving);
})

moving = function(c,x,y){
	alert(c.id);
	alert(x);
	alert(y);
}

另一个例子:


页面代码：

<a href="http://www.baidu.com" id="baidu">百度</a>

js代码：

//事件处理EventObject

todo = function(e){//EventObject,在这里可以理解为：EventObject是HTMLElement对象的click事件的默认参数
	alert(this.id);//baidu
	var htmlEl = e.getTarget();//返回值是HTMLElement,得到事件触发的目标，这里也就是指<A>连接标签
	alert(htmlEl.innerText);//打印出:"百度"  （HTMLElement有innerHTML和innnerText方法。 Element没有）
	e.stopEvent();//阻止事件继续发生，也就是<A>标签不会跳转到baidu页面了
	
	//获得实际传递参数值
	alert(arguments.length);//3
	alert(arguments[2].aa);//test
	alert(arguments[2]["aa"]);//test
	
}
Ext.onReady(
	function(){
		var  baidu = Ext.get("baidu");
		baidu.on("click",todo,baidu,{aa:'test'});
	}
)

评论

2 楼 JavaFlasher 2009-01-06  

最后 ：

EventObject,在这里可以理解为：EventObject是HTMLElement对象的click事件的默认参数

是不是应该：

EventObject,在这里可以理解为：EventObject是Element对象的click事件的默认参数

因为 你前面说

Ext.get("button1");//返回的Element对象
Ext.getDom("button1");//返回的HTMLElement对象

只是求证一下，没别的意思。

写得很好。我每个都执行了一遍 。受益很多。

1 楼 hanjs 2008-12-31  

不错，学习了