[07]EXTJS4.0的事件機制Event

1.事件的3種綁定方式

HTML/DHTML

DOM

EXTJS

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

它爲所有支持事件機制的extjs組件提供事件的支持

如果我們自己創建新的組件需要有事件的支持那麼我們就繼承它

事件的分類

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

業務事件[當面板收起的時候觸發，當組件被銷燬的時候觸發，當每一個對象的屬性值不爲空的時候觸發]

一個自定義事件的例子

沒有用到事件處理的場景

母親問孩子餓不餓--->

<----孩子

餓了-->給一瓶牛奶

不餓-->不給

用了事件的場景

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

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

感覺不餓就不喝

角色功能分析：

孩子：應該有自己能拿到牛奶判斷餓不餓的方法，當母親給他牛奶的時候調用這個方法。

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

母親：調用孩子拿牛奶的方法，並且傳入一瓶牛奶

3.addManagedListener 收管制的監聽

它是由調用的組件管理的，當組件執行了銷燬命令的時候所有被組件管制的事件全部銷燬

4.relayEvents 事件的分發和傳播(控制實現事件在不同控件或對象的傳播)

比如孩子喝完三鹿就去醫院，老爸就要帶着去醫院

5.事件對象Ext.EventObject

不是一個單例，不能被直接new出來，它會存活在事件處理函數中

6.事件管理器Ext.EventManager

它可以更方便地爲頁面元素綁定事件處理函數

方法：addListener 爲元素增減事件

---------------------------------------------------------------------------------------

這個例子主要講第一種事件綁定方式

lesson7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript"> 
function hello(){ 
    console.log('hello world'); 
} 
</script> 
</head> 
<body> 
<input type="button" id="btn1" value="第一種事件綁定方式" onClick="hello()"/> 
</body> 
</html>

運行結果如下(點擊界面的按鈕之後)：

hello world

---------------------------------------------------------------------------------------

這個例子主要講IE下的事件綁定方式

evemntBinding.js

(function(){ 
    Ext.onReady(function(){ 
    document.getElementById("btn1").attachEvent("onclick",function(){ 
       alert("第二種事件綁定方式"); 
        }); 
    }); 
})();

lesson7_2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript" src="evemntBinding.js"></script> 
</head> 
<body> 
<input type="button" id="btn1" name="btn1" value="第二種事件綁定方式"/> 
</body> 
</html>

運行結果如下：

彈出：“第二種事件綁定方式“

------------------------------------------------------------------------------------

這個例子主要講FIREFORX，chrome下的事件綁定方式

evemntBinding2.js

(function(){ 
    Ext.onReady(function(){ 
    document.getElementById("btn1").addEventListener("click",function(){ 
       console.log("第二種事件綁定方式"); 
        }); 
    }); 
})();

lesson7_3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript" src="evemntBinding2.js"></script> 
</head> 
<body> 
<input type="button" id="btn1" name="btn1" value="第二種事件綁定方式"/> 
</body> 
</html>

運行結果如下：

第二種事件綁定方式

-------------------------------------------------------------------------------------

這個例子主要講Ext.isIE

evemntBinding3.js

(function(){ 
    Ext.onReady(function(){ 
        if(!Ext.isIE){ 
        document.getElementById("btn1").addEventListener("click",function(){ 
           console.log("第二種事件綁定方式"); 
            }); 
        }else{ 
        document.getElementById("btn1").attachEvent("onclick",function(){ 
        alert("第二種事件綁定方式"); 
            }); 
        } 
    }); 
})();

lesson7_3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript" src="evemntBinding3.js"></script> 
</head> 
<body> 
<input type="button" id="btn1" name="btn1" value="第二種事件綁定方式"/> 
</body> 
</html>

運行結果如下：

第二種事件綁定方式

---------------------------------------------------------------------------------------這個例子主要講第三中綁定事件的方式

evemntBinding4.js

(function(){ 
    Ext.onReady(function(){ 
    Ext.get('btn1').on("click",function(){ 
      alert("第三種事件綁定方式"); 
        }); 
    }); 
})();

lesson7_4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript" src="evemntBinding4.js"></script> 
</head> 
<body> 
<input type="button" id="btn1" name="btn1" value="第三種事件綁定方式"/> 
</body> 
</html>

運行結果：

彈出如下內容：

第三種事件綁定方式

-----------------------------------------------------------------------------------

這個例子主要講Ext.util.Observable和其中的addListener和fireEvent

customEvent.js

(function(){ 
    Ext.onReady(function(){ 
    Ext.define("children",{ 
        extend:'Ext.util.Observable', 
            constructor:function(){ 
               this.callParent(arguments);//課程中沒有這句話，如果沒有的話是會報錯誤
               this.state = "hungry",//目前所屬的狀態 hungry full 
               this.setMilk = function(milk){ 
                  this.fireEvent('hungry',milk); 
               }, 
               this.addListener("hungry",function(milk){ 
               if(this.state == 'hungry'){ 
                  this.drink(milk); 
               }else{ 
                  console.log("我不餓"); 
               } 
            }), 
                this.drink = function(milk){ 
                  console.log("我喝掉了一瓶牛奶： " + milk); 
                } 
            } 
        }); 
        var children = Ext.create("children",{}); 
        //母親調用孩子的接受牛奶的方法 
        children.setMilk('三鹿牛奶'); 
    }); 
    /** 
     * 爲對象添加一個事件addEvents-->事件的監聽方式註冊這個事件addListener-->觸發這個事件的動作fireEvent 
     */ 
})();

運行結果如下：

我喝掉了一瓶牛奶：三鹿牛奶

-----------------------------------------------------------------------------

這個例子主要講Ext.util.Observable.capture方法，即事件的捕獲，攔截掉孩子對這個事件的執行

customEvent2.js

(function(){ 
    Ext.onReady(function(){ 
    Ext.define("children",{ 
        extend:'Ext.util.Observable', 
            constructor:function(){ 
               this.callParent(arguments);//課程中沒有這句話，如果沒有的話是會報錯誤： 
               this.state = "hungry",//目前所屬的狀態 hungry full 
               this.setMilk = function(milk){ 
                    this.fireEvent('hungry',milk); 
                }, 
                this.addListener("hungry",function(milk){ 
                if(this.state == 'hungry'){ 
                   this.drink(milk); 
                }else{ 
                  console.log("我不餓"); 
                } 
            }), 
                this.drink = function(milk){ 
                  console.log("我喝掉了一瓶牛奶： " + milk); 
                } 
            } 
        }); 
        var children = Ext.create("children",{});//本對象是牛奶過敏的對象 
        Ext.util.Observable.capture(children,function(eventName){ 
        if(eventName == "hungry"){ 
           console.log("這個孩子牛奶過敏不能喝牛奶..."); 
               return false; 
        }else{ 
           return true; 
        } 
    }); 
      //母親調用孩子的接受牛奶的方法 
    children.setMilk('三鹿牛奶'); 
    }); 
})();

運行結果如下：

這個孩子牛奶過敏不能喝牛奶...

-------------------------------------------------------------------------------------

這個例子主要講事件分發relayEvents

relayEvent.js

(function(){ 
    Ext.onReady(function(){ 
      Ext.define("children",{ 
        extend:'Ext.util.Observable', 
            constructor:function(){ 
               this.callParent(arguments);//課程中沒有這句話，如果沒有的話是會報錯誤： 
               this.state = "hungry",//目前所屬的狀態 hungry full 
               this.setMilk = function(milk){ 
                 this.fireEvent('hungry',milk); 
                }, 
                this.addListener("hungry",function(milk){ 
                  if(this.state == 'hungry'){ 
                     this.drink(milk); 
                  }else{ 
                     console.log("我不餓"); 
               } 
             }), 
             this.drink = function(milk){ 
                  console.log("我喝掉了一瓶牛奶： " + 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(){ 
            console.log("送喝了三鹿的孩子去醫院..");  
         }); 
         var father = Ext.create("father",{}); 
        //母親調用孩子的接受牛奶的方法 
        children.setMilk('三鹿牛奶'); 
    }); 
})();

運行結果：

我喝掉了一瓶牛奶：三鹿牛奶

送喝了三鹿的孩子去醫院..

------------------------------------------------------------------------------

這個例子主要講addManagedListener

manageListener.js

(function(){ 
    Ext.onReady(function(){ 
    var tbar = Ext.create("Ext.toolbar.Toolbar",{ 
        renderTo:Ext.getBody(), 
            width:500, 
            items:[ 
                 {xtype:'button',id:'create',text:'create'}, 
                 {xtype:'button',id:'delete',text:'delete'}, 
                 {xtype:'button',text:'銷燬刪除按鈕',handler:function(){ 
                      var c = Ext.getCmp("delete");//不是頁面上的元素的按鈕 
                      if(c){ 
                        c.destroy(); 
                      } 
                }} 
            ] 
    }); 
        var deleteB = Ext.getCmp("delete"); 
        //刪除了delete按鈕之後，create按鈕的事件也刪除了 
        deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){ 
            console.log("添加操作"); 
        }); 
     }); 
})();

-------------------------------------------------------------------------------------

這個例子主要講事件對象

EventObject.js

Ext.onReady(function(){ 
   var b = Ext.get("btn");//Ext.get獲取DOM中元素 
   b.on("click",function(e){ 
       console.log(e); 
       console.log(e.getPageX()); 
    }); 
});

lesson7EventObject.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript" src="EventObject.js"></script> 
</head> 
<body> 
<input type="button" id="btn" value="按鈕"/> 
</body> 
</html>

運行結果如下：

constructor {browserEvent: MouseEvent, type: "click", button: 0, shiftKey: false, ctrlKey: false…}

------------------------------------------------------------------------------

這個例子主要講Ext.EventManager.addListener

eventmanager.js

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

lesson7EventManager.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>事件</title> 
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
<script type="text/javascript" src="eventmanager.js"></script> 
</head> 
<body> 
<input type="button" id="btn" value="按鈕"/> 
</body> 
</html>

運行結果：

通過事件管理器進行事件的監聽註冊

111111

[07]EXTJS4.0的事件機制Event

mybatis xml使用不存在的類

DIV與SPAN之間有什麼區別

我的友情鏈接

[05]EXTJS4.0的讀寫器reader,writer

End-to-End Binary SOAP Attachment 2: Creating the Web Service

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結