神武八荒一颗小说_[Ext JS 7]事件（Event）| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 7]事件（Event）

## [Ext JS 7]事件（Event）
### 監聽(tīng)事件
```javascript
一個(gè)組件可以監聽(tīng)多個(gè)事件，比如
Ext.create('Ext.Button', {
	renderTo: Ext.getBody(), 
	text: 'My Button',
	listeners: {
		mouseover: function () {//鼠標放上去調用hide()方法
		this.hide(); //hide也是默認方法，可以重寫(xiě)                    
	},                    
	hide: function () {// 1 秒后顯示
		Ext.defer(function () {
		this.show();
		}, 1000, this);                    
		}                
	}            
});
```
以上示例的效果是： 鼠標放上去隱藏按鈕， 一秒鐘后再顯示。
### 添加監聽(tīng)
事件的監聽(tīng)可以在組件配置里添加，也可以在組件創(chuàng  )建后添加。
在創(chuàng  )建實(shí)例時(shí)添加，使用listeners 選項配置
```javascript
Ext.create('Ext.Button', {
	renderTo: Ext.getBody(),
	text: 'My Button',
	listeners: {
	click: function () {
		alert("Click")
		}                
	}            
});
```
在已有實(shí)例上添加， 使用on()方法添加
```javascript
var button = Ext.create('Ext.Button', {
	renderTo: Ext.getBody(),
	text: 'My Button'
	});
	button.on('click', function() {
		alert("Click")
});
```
.on的方法也可以添加多個(gè)事件，比如上面的mouseover()和hide()。
### 移除監聽(tīng)
使用 un()方法可以移除已經(jīng)添加的監聽(tīng)，示例：
```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);
```

### 監聽(tīng)的范圍
使用scope可以限定監聽(tīng)事件的范圍，比如有一個(gè)按鈕，添加事件時(shí)，設置
```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方法的參數傳遞的是一個(gè)對象，而不是函數，也可使用如下寫(xiě)法：
```javascript
button.on({    
	click: {        
	scope: panel,
	fn: function() {
	Ext.Msg.alert('Success!', this.getXType());        
	}    
}});
```
scope不同，在事件方法中通過(guò)this獲取的組件不同
只監聽(tīng)一次，使用single配置項
```javascript
var singleClidkbutton = Ext.create('Ext.Button', {
	text: '僅監聽(tīng)一次點(diǎn)擊事件',                
	listeners: {
	click: {                        
	single: true,
	fn: function () {
	Ext.Msg.alert('Success!', '僅執行一次');
	}                    
	}                
	}            
	});
	var myContainer = Ext.create('Ext.container.Container', {
	items: [singleClidkbutton],                
	renderTo: Ext.getBody()
});
```

### 緩沖配置 buffer
防止短時(shí)間內頻繁點(diǎn)擊或重復點(diǎn)擊
比如：在2秒的時(shí)間內只能點(diǎn)一次
```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');
		}        
	}    
}});
```

### 觸發(fā)事件的方法 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());
```

### 監聽(tīng)DOM事件
并不是所有的Ext JS組件都會(huì )觸發(fā)所有事件，但是通過(guò)定位組件的DOM元素，可以添加本地事件，以Ext.container.Container.?為例， 監聽(tīng)click時(shí)間是無(wú)效的，通過(guò)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);
```

### 事件歸一化
時(shí)間規范化是Ext JS5之上的版本可以在觸屏設備上可以使用的關(guān)鍵。
是從標準鼠標事件到它們等效的觸摸和指針事件的簡(jiǎn)單轉換。
指針事件是w3c標準，用于處理針對屏幕上一組特定坐標的事件，而與輸入設備（鼠標，觸摸，手寫(xiě)筆等）無(wú)關(guān)。
當您的代碼為鼠標事件請求偵聽(tīng)器時(shí)，框架將根據需要附加類(lèi)似的觸摸或指針事件。 例如，如果應用程序嘗試附加mousedown偵聽(tīng)器：
比如：
myElement.on('mousedown', someFunction);
1
對于支持觸摸事件的設備，事件系統會(huì )將其轉換為touchstart：
myElement.on('touchstart', someFunction);
1
或者，在支持指針事件的設備的情況下，pointerdown：
myElement.on('pointerdown', someFunction);
1
這個(gè)轉換是已經(jīng)準備好的， 因此無(wú)需任何其他編碼即可獲得平板電腦和觸摸屏支持。 可以使用 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還提供了強大的系統來(lái)識別有意義的手勢，因為它們可以進(jìn)行pinch捏，rotate旋轉，drag拖動(dòng)等操作?？梢詤⒖糋esture。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 7]事件（Event）

網(wǎng)站導航