Extjs學習筆記--（五，事件）

時間 2019-11-17

標籤 extjs 學習筆記事件简体版

原文原文鏈接

Extjs中事件包括瀏覽器事件（單機按鈕，鼠標移動等觸發）和內部事件（組件之間的聯動）javascript

綁定瀏覽器事件的過程Ext.EventManagercss

要爲元素綁定事件，一般會使用EventManager.on方法html

Ext.EventManager.on(el,eventname,fn[,scope,options])java

el要綁定的事件元素，能夠爲元素的id，element對象獲htmlelement對象bootstrap

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>

View Code

        
        <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對象的實例才能傳遞給觸發函數ide

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>