Extjs中事件包括瀏覽器事件（單機按鈕，鼠標移動等觸發）和內部事件（組件之間的聯動）
綁定瀏覽器事件的過程Ext.EventManager
要為元素綁定事件，通常會使用EventManager.on方法
Ext.EventManager.on(el,eventname,fn[,scope,options])
el要綁定的事件元素，可以為元素的id，element對象獲htmlelement對象
eventname一般情況下是事件的名稱，但是在一次定義多個事件時可以是一個對象，當eventname是事件名稱時，fn就是事件要觸發的函數，當eventname是對象時fn會被忽略
scope；作用域
options：事件觸發函數的配置對象
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" /> <script src="Extjs/bootstrap.js"></script> <script src="Extjs/locale/ext-lang-zh_CN.js"></script> </head> <body> <input type="text" id="input1" value="請輸入"/> <input type="text" id="input2" value="請輸入"/> <input type="text" id="input3" value="請輸入"/> <script type="text/javascript"> var focus=function(e, el) { if (el.value == '請輸入') el.value = ''; } var blur = function (e, el) { if (el.value == '') el.value = '請輸入'; } //單項綁定事件 Ext.EventManager.on("input1", "focus", focus); Ext.EventManager.on("input1", "blur", blur); //多項同時綁定 Ext.EventManager.on("input2", { focus: focus, blur:blur }) Ext.EventManager.on("input3", { focus: { fn: focus }, blur: { fn: blur } }) </script> </body> </html>
<div id="div1" style="background:red;height:200px;width:200px">
</div>
<script type="text/javascript">
Ext.EventManager.on("div1","click", function(e) {
alert(e.getXY());
}, this, { delay: 3000 });
</script>
封裝瀏覽器事件：Ext.EventObject
瀏覽器事件都要封裝成EventObjectImpl對象的實例才能傳遞給觸發函數
EventObject是Ext.EventObjectImpl的實例，相當於一個共享的瀏覽器事件封裝對象，使用setEvent方法將瀏覽器事件封裝成EventObject對象 后再傳遞給觸發函數，從而實現跨平台的處理，所以SetEvent是封裝瀏覽器事件的關鍵方法
EventObjectImpl對象除了提供了事件的基礎屬性外，還提供了一系列處理方法
getCharCode：返回事件的字符編碼
getKey：返回標准化后的鍵盤代碼
getPageX，getX：返回事件的x坐標
getPageY，getY：返回事件的y坐標
getXY：以數組格式返回事件坐標點
getPoint:以point對象格式返回事件的坐標點
getRealatedTarget：返回與事件目標節點相關的節點
getTarget:返回事件目標節點
getWheelDelta：返回標准化后的鼠標滾輪滾動值
hasModifier：如果鍵盤的ctrl，meta，shift，或者alt鍵按下返回true
injectEvent：使用EventObject對象的數據和一個新目標注入一個Dom事件
這是一個多層次的技術，不建議使用
isNavKeyPress：如果鍵盤按下的是Pageend，pageup，end，home，箭頭鍵，回車鍵，tab鍵，或者esc鍵，該值為true
isSpecialKey：如果鍵盤按下的是isNavKeyPress，ctl，backspace，shift，alt，pause等時，為true
preventDefault：組織瀏覽器的默認事件處理
stopEvent：停止事件，執行preventDefault方法，主要用於阻止瀏覽器右鍵菜單，以便使用自己的彈出菜單
stopPropagation：取消事件傳遞
within：檢測事件目標是否是指定對象，如果是則返回true，否則返回false
移除瀏覽器事件
EventManager提供了un，removeAll和purgeElement這3種移除瀏覽器事件的方法
1，un
從元素中移除一個事件
Ext.EventManager.un(el,eventname,fn,scope)
el是要移除事件的元素，它可以為元素id，element對象或htmlElement對象
eventname與綁定事件一樣，可以為事件名或配置對象，
fn為要移除的事件，如果沒有，則無法移除，
scope是函數的作用於，必須與綁定事件時一致，方法un是removeListener的簡寫
2，removeAll
從元素中移除所有事件
Ext.EventManager.removeAll(el)
el為要移除所有事件的元素
3，purgeElement
使用遞歸方式移除元素及其子節點的事件
Ext.EventManager.purgeElement（el[,eventname]）
el是要移除事件的元素
eventname是事件的名稱，如果不設置則移除所有事件
內部事件對象Ext.util.Event
使用Event對象記錄他自己的信息，還提供了綁定時間，移除事件，觸發事件和清理緩存或延遲事件等方法，
要注意的是Event對象提供的方法只是框架內部使用的接口，而不是外部接口，因而不喲啊嘗試直接使用這些方法
1，addListener
綁定內部事件
2，removeListener
移除事件
3，clearListeners
使用迭代方式停止所有緩存或延時事件
4，Fire
觸發事件
為組件增加事件接口：Ext.util.Observable
為組件綁定事件
--1,在創建對象中配置listeners屬性
--2，創建組件后，使用on方法綁定
為組件觸發事件
--使用fireEvent方法觸發事件
為組件移除事件
--如果組件存在瀏覽器事件，則移除事件時同時移除瀏覽器事件，該操作會使用到Observable對象的removeManagedListener方法
特定功能的事件對象
DelayedTask 對象只要勇於實現輸入緩沖的功能，在指定的事件間隔內，如果用戶沒有處罰事件，就會執行實際觸發函數
DelayedTask對象提供了一下兩個方法：
cancel：取消最后的隊列任務
delay：取消當前的任務，開始一個新的任務
一般任務：Ext.util.TaskRunner與Ext.TaskManager
taskManager對象時TaskRunner對象的一個實例，因而可以直接使用TaskManager對象執行任務
run:任務出發時執行的函數
interval：觸發任務的時間間隔，單位是毫秒
args：可選，為傳遞給觸發函數的參數數組
scope：可選，觸發函數的作用域
duration：可選，任務運行事件超過該值指定的時間后，任務會自動停止，其單位為毫秒
repeat：可選，為任務可執行的次數，超過此指定的次數，任務會 自動停止
TaskRunner對象提供了Start，stop，stopAll三個方法操作任務
封裝好的單機事件：Ext.util.ClickRepeater
封裝單機事件的作用是簡化代碼的書寫
ClickRepeater對象時從Observable對象繼承的對象因而擁有Observable對象的所有成員
它也定義了自己獨有的配置項
pressCls：單機時應用在元素上的樣式名稱，可實現特殊效果
accelerate：布爾值，如果true，interval和delay配置項會被忽略，操作會慢慢開始並逐漸加速
delay：在該值指定時間后才會再次出發事件
interval：指定觸發事件之間的間隔，默認值是20毫秒
listeners；可選，為對象，可為事件配置對象，可在這里綁定事件
preventDefault：布爾值，如果未true，組織默認的單機事件
stopDefault：布爾值，如果未true，停止默認的單擊事件
鍵盤事件
為元素綁定鍵盤事件：Ext.util.KeyMap
KeyMap 對象可以為元素設置一些按鍵，從而實現一些特殊功能，例如，可以在工具欄的按鈕上增加向下箭頭的按鍵，讓他打開子菜單
要使用KeyMap對象，可以在創建實例時定義好配置對象或者配置對象數組，也可以在創建后使用addBinding方法來增加，配置對象主要有一下配置項：
key：觸發事件的鍵盤代碼。可以是單一的鍵盤代碼，也可以是鍵盤代碼數組
shift：布爾值，為true時，可實現與shift鍵一起的組合鍵功能
alt：布爾值，為true時，可以實現與alt鍵一起的組合鍵功能
ctrl：布爾值，為true時，可以實現與ctrl鍵一起的組合鍵功能
handler（fn）：事件的觸發函數，fn為別名
scope：觸發函數的作用域
defaultEventAction：事件的默認操作。可以設置為stopEvent，stopPropagation和 preventDefault,如果不設置則沒有默認操作
可以使用disable,enable和setDisabled開啟KeyMap對象，而方法isEnable可返回KeyMap的狀態，如果為開啟狀態，返回true
Demo--給html增加enter鍵按下，焦點改變事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" /> <script src="Extjs/bootstrap.js"></script> <script src="Extjs/locale/ext-lang-zh_CN.js"></script> <style> #form1 span{ height: 30px;width: 200px;display: block;} </style> </head> <body> <div style="margin:20px 0 0 20px"> <form id="form1"> <span>姓名：<input name="name" type="text" value=""/></span> <span>性別：<input name="sex" type="radio" value="男"/>男<input name="sex" type="radio" value="女"/>女</span> <span>電子郵件：<input type="text" name="email" value=""/></span> <span>個人簡介：<textarea name="itro"></textarea></span> </form> </div> <script type="text/javascript"> var els = Ext.query("#form1 input,textarea"); Ext.create("Ext.util.KeyMap", "form1", { key: 13, fn: function (key, e) { var el = e.target, target = els, ln = target.length; for (var i = 0; i < ln; i++) { if (target[i] == el) { if (i + 1 == ln) { target[0].focus(); } else { target[i + 1].focus(); } } } }, scope: Ext.getDom("form1") }); </script> </body>
鍵盤導航：Ext.util.KeyNav
KeyNav的作用是封裝鍵盤導航事件，從而輕松的在頁面中設置鍵盤導航。可用的導航包括回車鍵，空格鍵，4個方向鍵，tab鍵，esc鍵，pageup，pagedown，del，backspace，home，end
與keymap對象一樣，KeyNav也可以通過disabled，enable和setDisabled三個方法開啟或關閉其功能