[Ext JS 7]事件（Event）| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 7]事件（Event）

## [Ext JS 7]事件（Event）
### 监听事件
```javascript
一个组件可以监听多个事件，比如
Ext.create('Ext.Button', {
	renderTo: Ext.getBody(), 
	text: 'My Button',
	listeners: {
		mouseover: function () {//鼠标放上去调用hide()方法
		this.hide(); //hide也是默认方法，可以重写                    
	},                    
	hide: function () {// 1 秒后显示
		Ext.defer(function () {
		this.show();
		}, 1000, this);                    
		}                
	}            
});
```
以上示例的效果是： 鼠标放上去隐藏按钮， 一秒钟后再显示。
### 添加监听
事件的监听可以在组件配置里添加，也可以在组件创建后添加。
在创建实例时添加，使用listeners 选项配置
```javascript
Ext.create('Ext.Button', {
	renderTo: Ext.getBody(),
	text: 'My Button',
	listeners: {
	click: function () {
		alert("Click")
		}                
	}            
});
```
在已有实例上添加， 使用on()方法添加
```javascript
var button = Ext.create('Ext.Button', {
	renderTo: Ext.getBody(),
	text: 'My Button'
	});
	button.on('click', function() {
		alert("Click")
});
```
.on的方法也可以添加多个事件，比如上面的mouseover()和hide()。
### 移除监听
使用 un()方法可以移除已经添加的监听，示例：
```javascript
var doSomething = function() {
	Ext.Msg.alert('Success!', 'listener called');};
	var button = Ext.create('Ext.Button', {
	renderTo: Ext.getBody(),    
	text: 'My Button',    
	listeners: {
	click: doSomething,    
}});Ext.defer(function() {
//3秒后移除事件    
	button.un('click', doSomething);}, 3000);
```

### 监听的范围
使用scope可以限定监听事件的范围，比如有一个按钮，添加事件时，设置
```javascript
var panel = Ext.create('Ext.Panel', {
	html: 'Panel HTML'            });
	var button = Ext.create('Ext.Button', {
	renderTo: Ext.getBody(),
	text: 'Click Me'            
	});
	button.on({
	click: function () {
	Ext.Msg.alert('Success!', this.getXType()); //默认是button,设置scope为panel,则是panel                },scope: panel
});
```
注意：
这里on方法的参数传递的是一个对象，而不是函数，也可使用如下写法：
```javascript
button.on({    
	click: {        
	scope: panel,
	fn: function() {
	Ext.Msg.alert('Success!', this.getXType());        
	}    
}});
```
scope不同，在事件方法中通过this获取的组件不同
只监听一次，使用single配置项
```javascript
var singleClidkbutton = Ext.create('Ext.Button', {
	text: '仅监听一次点击事件',                
	listeners: {
	click: {                        
	single: true,
	fn: function () {
	Ext.Msg.alert('Success!', '仅执行一次');
	}                    
	}                
	}            
	});
	var myContainer = Ext.create('Ext.container.Container', {
	items: [singleClidkbutton],                
	renderTo: Ext.getBody()
});
```

### 缓冲配置 buffer
防止短时间内频繁点击或重复点击
比如：在2秒的时间内只能点一次
```javascript
var button = Ext.create('Ext.Button', {
		renderTo: Ext.getBody(),    
		text: 'Click Me',
		listeners: {
		click: {
		buffer: 2000,
		fn: function() {
			Ext.Msg.alert('Success!', 'I say this only once every 2 seconds');
		}        
	}    
}});
```

### 触发事件的方法 fireEvent()
```javascript
var myEventButton = Ext.create('Ext.Button', {
		text: '自定义事件',                
		listeners: {
		myEvent: function (button, time) {
		Ext.Msg.alert('Success!', 'myEvent fired! You click at  ' + time);
		}                
	}            
});           
myEventButton.fireEvent('myEvent', myEventButton, new Date());
```

### 监听DOM事件
并不是所有的Ext JS组件都会触发所有事件，但是通过定位组件的DOM元素，可以添加本地事件，以Ext.container.Container.?为例， 监听click时间是无效的，通过getEl()添加本地事件，示例如下：
```javascript
var mycontainer = Ext.create('Ext.Container', {
	html: '添加事件到容器!',
	listeners: {
	click: function(){
		Ext.Msg.alert('Success!', 'I have been clicked!')
		}
		}
	});
	mycontainer.getEl().on('click', function(){
	this.fireEvent('click', mycontainer);
}, mycontainer);
```

### 事件归一化
时间规范化是Ext JS5之上的版本可以在触屏设备上可以使用的关键。
是从标准鼠标事件到它们等效的触摸和指针事件的简单转换。
指针事件是w3c标准，用于处理针对屏幕上一组特定坐标的事件，而与输入设备（鼠标，触摸，手写笔等）无关。
当您的代码为鼠标事件请求侦听器时，框架将根据需要附加类似的触摸或指针事件。 例如，如果应用程序尝试附加mousedown侦听器：
比如：
myElement.on('mousedown', someFunction);
1
对于支持触摸事件的设备，事件系统会将其转换为touchstart：
myElement.on('touchstart', someFunction);
1
或者，在支持指针事件的设备的情况下，pointerdown：
myElement.on('pointerdown', someFunction);
1
这个转换是已经准备好的， 因此无需任何其他编码即可获得平板电脑和触摸屏支持。 可以使用 translate事件选项禁用转换：
```javascript
myElement.on({    mousedown: someFunction,    // only listen to mousedown.  Do not call the handler in response to touchstart or pointerdown.    translate: false});
```

除了DOM事件和Component事件外，Ext JS还提供了强大的系统来识别有意义的手势，因为它们可以进行pinch捏，rotate旋转，drag拖动等操作。可以参考Gesture。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 7]事件（Event）

网站导航