JavaScript Event 事件 事件流 事件對象 事件處理程序 回調函數 error和try...catch和throw

參考資料：

慕課網 DOM事件探祕    js事件對象 處理 

事件驅動：

JS是採用事件驅動的機制來響應用戶操做的，也就是說當用戶對某個html元素進行操做的時候，會產生一個事件，該事件會驅動某些函數來處理。

定義某種行爲，而後將其添加到用戶觸發的事件之上（好比點擊或者按鍵）

事件：

 是文檔/瀏覽器窗口中發生的，特定的交互瞬間。

UI事件

     

焦點事件

 

鼠標和滾輪事件

 

click      

鼠標主鍵（通常是左鍵）或按下回車鍵

dblclick

雙擊鼠標主鍵

mousedown

按下任意鼠標鍵，不能經過鍵盤觸發

mousemove

在元素內部移動時重複觸發

mouseover

鼠標首次移動到某個元素邊界以內時觸發

mouseup

釋放鼠標按鈕，不能經過鍵盤出發

mouseout

將其移入另外一個元素內部時

mouseenter mouseleave

mouseover - 鼠標指針通過任何子元素都會觸發綁定在父元素上的mouseover事件
mouseout - 鼠標指針離開任何子元素時都會觸發父元素上的mouseover事件
mouseenter - 鼠標指針通過綁定的元素時觸發事件，通過其子元素時，不會觸發事件
mouseleave - 只有當鼠標離開綁定的元素時纔會觸發該事件
hover！= mouseover+mouseout
hover=mouseenter + mouseleave

mousewheel

滾輪事件

鍵盤和文本事件

HTML事件

其它事件 

頁面中 有些對象 運行過程當中 產生 的 對象

事件對象(Event對象):

在觸發DOM上的某個事件時，會產生一個事件對象event。這個對象中包含着全部與事件有關的信息。包括致使事件的元素，事件的類型以及其餘與特定事件相關的信息。

兼容DOM的瀏覽器會將一個Event對象傳入到事件處理程序中。不管指定事件處理程序時使用什麼方法（DOM0級或DOM2級），都會傳入Event對象。

只有在事件處理程序執行期間，event對象纔會存在；一旦程序執行完畢，event對象就會被銷燬。

EU.getEvent = function(event){
    return event || window.event;         IE下event是全局對象，經過window.event取得

}

        經常使用的 事件對象屬性 和 時間對象方法:

       1.DOM 中的 事件對象

         (1) type屬性  用於捕獲事件類型

       （2）target屬性 用於獲取事件目標

       （3） stopPropagation()方法 用於阻止事件冒泡

       （4） preventDefault()方法  阻止事件的 默認行爲

         (5)   currentTarget屬性，監聽器綁定在哪一個dom元素上面

       2.IE中 的 事件對象

         (1) type屬性 用於捕獲事件類型

        （2）srcElement屬性 用於獲取事件目標

        （3）cancelBubble屬性 用於阻止事件冒泡

        （4） returnValue屬性    阻止事件的 默認行爲         

 事件處理程序:

       對事件作出相應的函數。（做爲事件處理程序的函數）

       1. HTML事件處理程序 （js 和 html 緊密耦合）

           直接在HTML代碼中添加事件處理程序

       2. DOM0級事件處理程序 

           把一個函數賦值給一個事件的事件處理屬性

       onclick=function(){};

       onclick=null;

      3.DOM2級事件處理程序

            addEventlistener() 和removeEventListener()

            接受三個參數:要處理的事件名，做爲事件處理程序的函數，布爾值

       4.IE事件處理程序

            attachEvent()   和   detachEvent()

             接受三個參數:要處理的事件名，做爲事件處理程序的函數     不適用第三個參數的緣由:IE8及更早的瀏覽器版本只支持事件冒泡

       5.跨瀏覽器事件處理程序

 1 var eventUtil = {  
 2     // 添加句柄  
 3     addHandler: function(element, type, handler) {  
 4         if (element.addEventListener) {  
 5             element.addEventListener(type, handler, false);  
 6         } else if (element.attachEvent) {  
 7             element.attachEvent('on' + type, handler);  
 8         } else {  
 9             element['on' + type] = handler;  
10         }  
11     },  
12     // 刪除句柄  
13     removeHandler: function(element, type, handler) {  
14         if (element.removeEventListener) {  
15             element.removeEventListener(type, handler, false);  
16         } else if (element.detachEvent) {  
17             element.detachEvent('on' + type, handler);  
18         } else {  
19             element['on' + type] = null;  
20         }  
21     },  
22     //獲取事件  
23     getEvent: function(event) {  
24         return event ? event : window.event;  
25     },  
26     //獲取事件類型  
27     getType: function(event) {  
28         return event.type;  
29     },  
30     //獲取事件源  
31     getElement: function(event) {  
32         return event.target || event.srcElement;  
33     },  
34     //阻止默認事件好比a連接跳轉  
35     preventDefault: function(event) {  
36         if (event.preventDefault) {  
37             event.preventDefault();  
38         } else {  
39             event.returnValue = false;  
40         }  
41     },  
42     //阻止事件冒泡  
43     stopPropagation: function(event) {  
44         if (event.stopPropagation) {  
45             event.stopPropagation();  
46         } else {  
47             event.cancelBubble = true;  
48         }  
49     }  
50 }  

回調函數:

            響應事件而執行的函數

            A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.    

            通常寫程序是你調用系統的API，若是把關係反過來，你寫一個函數，讓系統調用你的函數，那就是回調了，那個被系統調用的函數就是回調函數。

事件流:  

      1.事件冒泡  

      2.事件捕獲

 

 error和try...catch和throw:

error:

經過 Error 的構造器能夠建立一個錯誤對象。當運行時錯誤產生時，Error的實例對象會被拋出。Error對象可用於用戶自定義的異常的基礎對象。下面列出了各類內建的標準錯誤類型。

ECMA-262定義了七種錯誤類型（javascript高級程序設計 P）

Error

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIError

七種，Error是基類型，其它錯誤類型繼承自Error。

一、事情還有得挽回，換條路走 try { 執行某個邏輯 } catch (e) { 出問題鳥，換個邏輯執行 } 二、體面的退出 try { 正常流程 } catch (e) {                                               //  catch塊會接收到一個包含錯誤信息的對象。 該對象包含的實際信息因瀏覽器而已，但都有一個message屬性。 彈個框告訴用戶很差意思出了點問題 若是是用戶的錯就告訴用戶什麼地方錯了 若是是程序的錯，就告訴用戶很差意思無法執行 }