1.事件的3中繫結方式

       HTML/DHTML

       DOM

       EXTJS

1) HTML/DHTML 這也是最傳統的js繫結事件

<script type="text/javascript">
function hello(){
    alert('hello word');
}
</script>
<input type="button" id="btn1" value="點選" onClick="hello()"><br>

2) DOM

 Ext.onReady(function(){
//判斷是否是IE瀏覽器
    if(Ext.isIE){
    document.getElementById("btn2").attachEvent("onclick",function(){
              alert("IE");
           });
       }else{
    document.getElementById("btn2").addEventListener("click",function(){
           alert("Firefox");
           });   
       }
    });
 

 Ext.onReady(function(){
     //這種繫結事件和瀏覽器無關
     Ext.get('btn3').on("click",function(){
           alert("第三種事件繫結方式");
       })
    });

2.Ext.util.Observable 事件的基類

       他為所有支援事件機制的extjs組建提供事件的支援

       如果我們自己建立新的組建需要有時間的支援那麼我們就繼承他

       事件的分類

              標準事件[鍵盤按鈕按下,滑鼠的單擊雙擊,滑過滑動]

              業務事件[當面板收起的時候觸發,當組建被銷燬的時候觸發,當每一個物件的屬數值不為空的時候觸發]

       一個自定義事件的例子      

              沒有用到事件處理的場景

              母親問孩子和不餓-->

                             <-- 孩子

                                   餓了-->給一瓶牛奶

                                   不餓-->不給

              用了事件的場景

              母親給孩子一個瓶牛奶-->

                                          孩子拿到牛奶感覺餓了就喝

                                          感覺不餓就不喝

              角色功能分析:

                     孩子:應該有自己能拿到牛奶判斷餓不餓的方法,當母親給他牛奶的時候呼叫這個方法.

                     那麼孩子就要有一個業務事件時刻監聽這母親什麼時候給自己牛奶

                     母親:呼叫孩子拿牛奶的方法,並且傳入一瓶牛奶    

/***

        * 為物件新增一個事件addEvents-->事件的監聽方式註冊這個事件addListener-->觸發了這個事件的動作fireEvent

        */

Js程式碼：

Ext.onReady(function(){
  Ext.define("children",{
    extend:"Ext.util.Observable",  //Ext.util.Observable為事件的基類
    constructor:function(){      //建構函式
      this.state="hungry",
      //this.state="full",    //初始化小孩的狀態
      //定義觸發事件的函式setmilk
      this.setmilk=function(milk){
        this.fireEvent("getmilk",milk);   //fireEvent()是觸發這個事件
      },
      //添加了getmilk事件
      this.addEvents({"getmilk":true}),
      //註冊getmilk事件具體的處理機制
      this.addListener("getmilk",function(milk){
        //判斷孩子現在是否餓了
        if(this.state=="hungry")
        {
            this.deal(milk);
        }
        else{
           alert("現在不想喝牛奶");
        }
      }),
      //定義一個函式用來呼叫
      this.deal=function(milk){
         alert("喝了一瓶："+milk);
      };
    }
  });
  //建立一個孩子物件
  var children=Ext.create("children",{});
  //呼叫孩子的獲得牛奶的方法
  children.setmilk("伊利純牛奶");
});

頁面顯示結果：

3.addManagedListener 收管制的監聽

       他是由呼叫的組建管理的,當組建執行了銷燬命令的時候所有被組建管制的事件全部銷燬

Ext.onReady(function(){
        //建立了一條工具條
       var tbar = Ext.create('Ext.toolbar.Toolbar',{
           renderTo:Ext.getBody(),
           width:500,
           items:[
     //工具條有三個按鈕，create按鈕，delete按鈕，銷燬刪除按鈕
              {xtype:'button',id:'create',text:'create'},
              {xtype:'button',id:'delete',text:'delete'},
              {xtype:'button',text:'銷燬刪除按鈕',handler:function(){
             //單擊“銷燬刪除按鈕”後，delete按鈕就會消失了
                  var c = Ext.getCmp("delete");  //通過id獲取ExtJs元件
                  if(c){
                     c.destroy();  //銷燬
                  }
              }}        
           ]
       });
       var deleteB = Ext.getCmp("delete");
       //新增操作的效果其實是create按鈕的操作，但是是通過delete來管理的，如果delete按鈕不存在了，create的新增操作就失效了
       deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
           alert('新增操作');
       });
       //Ext.getCmp("create").on("click",function(){});
});

4.relayEvents 事件的分發和傳播

(控制實現事件在不同空間或物件內的傳播)

       比如說孩子喝完三鹿就去醫院呀,老爸就要帶著去醫院

 Ext.onReady(function(){
       Ext.define("children",{
           extend:'Ext.util.Observable',
           constructor:function(){
              this.state = "hungry",//目前所屬的狀態 full
              this.setMilk = function(milk){
                  this.fireEvent('hungry',milk);
              },
              this.addEvents({'hungry':true}),
              this.addListener("hungry",function(milk){
                  if(this.state == 'hungry'){
                     this.drink(milk);
                  }else{
                     alert("我不餓");            
                  }
              }),
              this.drink = function(milk){
                  alert("我喝掉了一瓶牛奶: "+milk);
              }
           }
       });
       var children =Ext.create("children",{});
       //父親類沒有宣告過任何監聽事件
       Ext.define("father",{
           extend:'Ext.util.Observable',
           constructor:function(config){
              this.listeners =config.listeners;
              this.superclass.constructor.call(this,config);
           }
       });
       var father =Ext.create("father",{});
       father.relayEvents(children,['hungry']);
       father.on("hungry",function(){
           alert("送喝了三鹿的孩子去醫院..");
       });
       //呼叫孩子的接受牛奶的方法
       children.setMilk("三鹿牛奶");
      
    });

5.事件物件Ext.EventObject

       不是一個單例,不能被直接new出來,他會存活早事件處理的函式中

Ext.onReady(function(){
  var b = Ext.get("btn4");
  b.on("click",function(e){
     alert(e);
  });
});

使用火狐瀏覽器除錯了e物件中封裝的資訊：

6.事件管理器Ext.EventManager

       他可以更方便的為頁面元素繫結事件處理函式

       方法:addListener 為元素增加事件

Ext.onReady(function(){
    Ext.EventManager.addListener("btn5",'click',function(){
       alert("通過事件管理器進行事件的監聽註冊");
    })
});