本内容是用于Web前端開發的Javascript視訊的課件，請通過Master Brother JavaScript視訊課程學習。
Javascript與HTML的互動是通過事件實作的，使用異步事件驅動的程式設計模型;
事件事件：
是在文檔或浏覽器視窗中發生的特定互動時刻;
這種方法在傳統軟體工程中被稱為觀察者模式模型，旨在支援頁面行為（Javascript代碼）和頁面外觀（html和CSS）之間的松散耦合;
事件首次出現在IE3和Navigator 3中，當它們從IE4和Navigator4釋出時，它們提供了相似但不相同的API，它們已經發展了幾個版本;
DOM2 級事件子產品本身并不涵蓋所有事件類型。
事件類型：
是描述已發生事件類型的字元串，例如常見事件：單擊（滑鼠單擊）、加載（頁面或圖像加載）、滑鼠懸停（滑鼠懸停）、選擇（在表單中選取輸入框）、送出（送出表單）、按鍵（鍵盤鍵）;
事件目标：事件的關聯對象;
事件處理程式：事件通常與事件發生時執行的函數結合使用，此函數稱為事件處理程式（函數）或事件偵聽器或偵聽器，響應和處理事件的函數;
事件流（事件傳播）：
事件流是指元素可以觸發其事件處理程式的過程，即這些元素可以觸發事件在頁面上接收事件的順序;
IE不同于Netscape在事件序列（事件流）支援上，IE事件流是冒泡流，Netscape事件流是捕獲流;
氣泡事件：
IE有一個名為事件冒泡的事件流;
基本思想：事件按照它們從最具體的事件目标元素（文檔中嵌套層次結構最深的節點）向上傳播到最不具體的事件目标元素（視窗或文檔對象）的順序觸發;ost
事件像DOM層次結構中的水泡一樣上升到頂部，按<div>，<正文，><html>和文檔的順序排列;
氣泡事件流
所有現代浏覽器都支援事件冒泡;
捕獲的事件：
Netscape團隊開發的事件流稱為事件捕獲，其基本思想與冒泡相反，從最不準确的對象接收從最不準确的對象到最準确的對象的事件;
如果按照以下事件流的順序捕獲上述事件流：文檔、<html>、<正文>和< div >，則也可以稱為自上而下的事件模型;
捕獲事件流
事件捕獲旨在捕獲事件到達其預期目标之前;
DOM2 事件規範要求事件應以文檔對象開頭，但标準浏覽器都從 Windows 對象捕獲事件。
DOM 事件流：
DOM支援兩種事件模型，捕獲事件和冒泡事件，DOM2事件指定事件流由三個階段組成：事件捕獲階段，目标階段和事件冒泡階段;
分三個階段執行 DoM 事件流
在DOM事件流中，實際目标在捕獲階段不接收事件;
DOM2級事件規範明确要求捕獲階段不涉及事件目标，但現代浏覽器在捕獲階段觸發事件對象上的事件，結果是有兩次機會在目标對象上方操作事件;
注冊事件處理程式/事件偵聽器：
為響應事件而調用的函數稱為事件處理程式或事件偵聽器;
有三種方法可以注冊事件處理程式;
HTML 事件處理程式：
在HTML元素的事件屬性中指定，事件屬性的名稱是"on"事件名稱，事件屬性中的值是可以執行的Javascript代碼，即HTML事件處理程式正文;
不能使用非尋呼 HTML 文法字元，例如 、"、< >;
如果 HTML 事件處理程式包含多個 Javascript 語句，則必須用分号分隔它們，或者中斷屬性值，以便它們可以跨越多行，例如：
您甚至可以在其中定義函數，例如：
HTML事件處理程式也可以在頁面上的其他位置定義，即使在外部Javascript檔案中也是如此。
HTML事件處理程式，在背景會建立一個封裝的元素屬性（attribute）值的函數，即由解釋器動态建立一個函數，該函數還具有局部變量事件，即事件對象;
HTML 事件處理程式中的第 1 個指向事件的目标元素，例如：
HTML 事件處理程式的角色域很特殊，因為它可以通路全局作用域中的任何變量和對象，但它以與使用 with 語句相同的方式擴充作用域，也就是說，它可以通路文檔及其内部自己的成員，就好像它是局部變量一樣， 如：
通過這種方式，事件處理程式可以輕松通路其自身元素的屬性（特性），例如：
如果目前元素是窗體控件元素，則作用域還包含通路窗體元素（父元素），例如：
是以，事件處理程式不需要引用表單元素來通路其他表單控件，例如：
HTML 事件處理程式的缺點：
時差：如果事件處理程式在響應時可能沒有執行條件來犯錯誤，是以，為了避免這樣的錯誤，必須在事件觸發之前定義相關的處理程式，并且可以将相關的處理代碼封裝在try-catch中，例如：
其擴充作用域鍊的特殊方式會導緻在不同的浏覽器中産生不同的結果，HTML和JS代碼耦合性很高，并且由于上述缺點，HTML事件處理程式不是很常用。
DOM0 級事件處理程式：
首先擷取對元素的引用，然後将該函數配置設定給元素的相應事件處理程式屬性;
優點：簡單，并具有跨浏覽器的優點;
每個元素（包括視窗和文檔）都有自己的事件處理程式屬性，這些屬性名稱區分大小寫，通常全部小寫，即使屬性名稱由多個單詞組成，例如 onclick、onload、readystate change 等;
此事件處理程式被視為元素的方法，是以事件處理程式在元素的作用域中運作，其中第一個引用目前元素，即事件目标;
是以，元素的任何屬性和方法都可以通過thisis通路;
以這種方式添加的事件處理程式在事件流的冒泡階段進行處理;
您還可以删除事件處理程式（如事件），隻需将其設定為 null;
HTML 事件處理程式和 DOM0 級事件處理程式的傳回值：在某些情況下，您可以為它們設定傳回值;
DOM0 事件處理程式的缺點是，隻能為目标元素的事件注冊一個事件處理程式，如果注冊了多個事件處理程式，則最後一個注冊的事件處理程式将覆寫前一個事件處理程式，例如：
DOM2 級事件處理程式：
DOM2定義了一個标準的事件模型，addEventListener（）方法為事件可以作為目标的所有元素（包括視窗和文檔）定義，以處理（注冊）指定的事件處理程式;
該方法接受三個參數：要處理的事件名稱（無法添加，此處為标準事件名稱），作為事件處理程式的函數和布爾值;
您還可以為同一事件注冊多個事件處理程式;
定義 HTML 事件處理程式或 DOM0 級事件處理程式和 DOM2 級事件處理程式，例如：
RemoveEventListener（） Remove Event：通過 addEventListener（） 添加的事件處理程式隻能使用 moveEventListener（） 方法删除，删除時，将傳入與添加處理程式時相同的參數;
無法删除通過 addEventListener（） 添加匿名函數，例如：
但是，它可以僞裝删除，例如：
如果使用 addEventListener（） 将事件處理程式添加到捕獲階段，則必須在 moveEventListener（） 中訓示它是捕獲階段，以便正确删除此事件，即第三個參數也必須相同;
您還可以一次删除多個事件，例如：
三個事件使用相同的處理程式，此時，隻要觸發了三個事件中的一個，就會删除所有三個事件處理程式;
使用了三個處理程式;
如果要擷取 Event 事件對象，則還會在事件處理程式的參數中指定該對象;
通常，事件處理程式被添加到事件流的冒泡階段，進而最大限度地提高與各種浏覽器的相容性;
IE 事件處理程式：
IE9和以下不支援DOM事件，但它實作了類似dom的事件，這些事件向每個元素和Windows對象添加兩個方法：attachEvent（"event_name event_name"，fnHandler）：将事件和事件處理程式附加到對象;這兩種方法都接受相同的兩個參數：事件名稱和處理程式，但事件名稱必須以"on"開頭，例如 onclick;
（IE11 不支援，IE10 及更低版本）
您還可以添加多個事件處理程式，但處理程式的執行順序可能與 DOM 不同，例如;
IE10和IE9的執行順序與DOM相同，但IE8及以下的執行順序與DOM相反;
由于IE僅支援事件冒泡（不支援事件捕獲），是以将上述方法添加到冒泡階段;
未觸發對視窗對象的onclick，表示IE頂部的氣泡是文檔對象;
使用 targetEvent（） 删除由 atachEvent（） 添加的事件處理程式，但您還必須提供相同的參數，并且它不能删除添加的匿名函數，例如：
使用 atachEvent（） 和使用 DOM0 級方法之間的主要差別在于事件處理程式的作用域，該處理程式在全局範圍内運作，是以 the 等于視窗;
您可以封裝函數，向元素添加某種類型的事件，注冊相關的事件處理程式，并将其指定為事件目标，例如：
在IE事件處理程式中，擷取事件事件對象與dom不同;
與 DOM 和 IE 注冊事件處理程式相容：
跨平台添加/删除事件處理程式：
事件事件對象：
當觸發DOM上的事件時，将生成一個事件對象，其中包含與該事件相關的所有資訊;
擷取事件資訊非常重要，一般擷取以下資訊：元素（對象）、事件類型、事件發生時的滑鼠資訊、事件發生時的鍵盤資訊等;
事件對象僅在事件發生時建立，并且隻能由事件處理程式通路;
DOM 事件對象：
在 DOM 中，事件對象必須作為唯一參數傳遞給事件處理程式，并且 DOM0 級别和 DOM2 級别都用于擷取事件對象。
通過 HTML 屬性添加事件處理程式時，變量事件将儲存事件對象，例如：
事件類：
Event 接口表示在 DOM 中發生的事件，DOM 是其他類型的事件的基類，包含适用于所有事件的屬性和方法;
文法： 事件 s 新事件 （類型Arg， 事件初始化）;參數：類型Arg，字元串，所建立事件的名稱;eventInit 可選，是 EventInit 類型的字典對象，接受以下字段：
"氣泡"，可選，布爾類型，預設值為false，訓示事件是否冒泡;
"可取消"，可選，布爾類型，預設值為false，訓示是否可以取消事件;
"composed"，可選，布爾類型，預設為false，訓示事件是否會觸發Shadow DOM根節點外的偵聽器;
但是，IE不支援它;對于事件，您可以将事件添加到元素并注冊其處理程式，例如：
使用 dispatchEvent（） 方法觸發事件，例如：
由于此事件可以冒泡，是以文檔子體元素也可以觸發該事件;
很少有應用程式使用event構造函數來傳回事件對象，并且IE不支援它，是以我們稍後将讨論建立customEvent對象的另一種方法：document.createEvent（"type"）;
事件對象的屬性和方法：
屬性/方法類型讀/寫指令
氣泡Boolean R訓示事件是否冒泡;
CancelBubbleBolean R/W 設定阻止冒泡，是 stopPropagation（） 方法的曆史别名，設定為 true，可以防止事件繼續冒泡;
可取消的布爾ANR訓示是否可以取消事件的預設行為;
ComposedBooleanR表明事件可以通過Shadow DOM的正常DOM之間的間隙冒泡;
currentTargetElementR注冊目前事件的元素;
DeepPathArrayR由事件流通過的DOM節點組成;
defaultPreventedBoolean R表示事件的預設行為是否已被取消，DOM3添加到true，訓示已調用preventDefault（）方法;
EventPhaseIntegerR訓示事件流正在處理到哪個階段：1用于捕獲階段，2用于目标階段，3用于冒泡階段;
顯式源目标ElementR事件的顯式原始目标;
在原始 TargetElementR 重置目标之前的事件原始目标;
ReturnValueBooleanR訓示事件的預設行為是否被阻止，與 defaultPrevented 屬性相同，這是舊 IE 引入的非标準曆史屬性，現在由收入調節;
srcElementElementR 事件目标與目标相同，由舊的 IE 引入，現已合并到規範中;
TargetElementR event target，觸發事件的元素，與srcElement相同;
時間戳NumberR事件建立時間戳（以毫秒為機關）;
TypeStringR是觸發的事件類型，大小寫無法區分;
IsTrustedBooleanRDOM3被添加為true，表示事件是由浏覽器生成的（例如使用者點選），而false是由腳本建立的;
composedPath（）：傳回一個包含事件路徑的數組;
initEvent（）：初始化通過 document.createEvent（）;
preventDefault（）：取消事件的預設行為，如果可更改項為 true，則可以使用此方法;
StopImmediatePropagation（） :D添加了OM3，取消了事件的進一步捕獲或冒泡，同時阻止了任何事件處理程式被調用;
停止傳播（）：取消事件的進一步捕獲或冒泡;
事件對象包含與建立它的特定事件相關的屬性和方法，但觸發的事件類型不同，可用的屬性和方法也不同。
活動詳情
與事件關聯的 viewAbstractViewR 的抽象視圖等效于事件發生的 windows 對象;
常見事件子類：
自定義事件：自定義事件類;
裝置輸入事件：旋轉移動裝置事件類;（例如，擷取事件的旋轉 x、y 和 Z 軸的角度等）
DragEvent：拖放事件類，它們繼承事件類和滑鼠事件類;
錯誤事件： 錯誤事件類;
FocusEvent：表示從 UIEvent 類繼承的與焦點相關的事件類;
鍵盤事件：鍵盤事件類
MouseEvent：滑鼠事件類，繼承自 UIEvent 類;
突變事件：更改事件類;
TouchEvent：Touch Event 類，繼承自 UIEvent 類;
使用者界面事件;
WheelEvent：滑鼠滾輪或類似輸入裝置的事件類;
類型屬性：
當您需要使用一個函數處理多個事件時，可以使用type屬性;
deepPath 屬性：傳回 Array，它由事件流傳遞的 DOM 節點組成;
傳回的末尾與路徑基本相同，但IE不支援此方法;
氣泡屬性：
氣泡傳回一個布爾值，訓示目前事件是否會冒泡到DOM樹頂部的元素;
例如，您可以檢查屬性是否冒泡，例如：
此屬性、目前目标、目标和 srcElement 屬性：
在事件處理程式中，這始終等于 currentTarget 的值，後者僅包含事件的實際目标;
如果将事件處理程式添加到元素的父節點，則三者是不同的，例如：
currentTarget 屬性在将同一事件處理程式注冊到多個元素（如：
對于srcElement屬性，它最初是由IE6引入的，DOM事件目标指向同一個對象，雖然現在包含在标準中，但是在一些移動浏覽器中是不支援的，是以在生産環境中，隻是為了相容舊版本的IE，而不是作為标準屬性來使用;
事件相位屬性：
事件對象的 eventPhase 屬性傳回一個整數值來确定事件的哪個階段目前位于事件流中，如果沒有正在處理任何事件（通常不會發生的值），則傳回 Event.NONE，值為 0;如果事件處理程式位于目标對象 TARGET 上，則傳回Event.CAPTURING_PHASE值、值 1 和 Event.AT 值為 2 時，如果在冒泡階段調用事件處理程式，則傳回值為 3 的Event.BUBBLING_PHASE;
目标對象本身的事件處理程式調用是第二階段;
如果事件處理程式注冊為捕獲，則在事件傳播的第一階段調用它;
單獨注冊捕獲事件處理程式：
事件捕獲提供了在事件到達目标之前檢視事件的機會，事件捕獲可用于程式調試，或者對于後面描述的事件取消技術，過濾掉事件以便永遠不會調用目标事件處理程式;
事件捕獲通常用于處理滑鼠拖放，因為處理拖放事件的位置不能是此元素中的子元素;
例：
取消事件（預設行為）：
在 HTML 事件處理程式和 DOM0 級事件處理程式中使用傳回 false 值來取消事件的預設行為;
使用 Event 對象時，可以使用 preventDefault（） 方法來阻止（或取消）特定事件的預設行為。
當使用 premiereDefault（） 方法時，隻有當可實作屬性為 true 時，才能阻止事件的預設行為;
示例：驗證資料輸入，例如：
event 對象的 defaultPrevented 屬性（在 DOM3 事件中是新的）表示目前取消事件的狀态（預設為 false），如果調用 premiereDefault（） 方法，則該屬性值為 true，例如：
ReturnValue 屬性：由舊版本的 IE 引入的非标準曆史屬性，現在包含在收入規範中，preventDefault（） 和預設的"防止"屬性也是如此;
取消事件傳播：
使用立即停止 DOM 層次結構中事件的傳播，即取消進一步的事件捕獲或冒泡，例如：
如果多個事件處理程式注冊到同一對象，則即使調用了 stopPropagation（） 方法，所有事件處理程式也會執行，例如：
CancelBubble，布爾值，可讀寫入，設定是否阻止冒泡，是stopPropagation（）方法的曆史别名，設定為true，可以防止事件繼續冒泡;
topImmediatePropagation（） 方法已添加到 DOM3 中的對象中，類似于 topPropagation（） 方法，以防止事件傳播，并阻止對在同一對象上為同一事件注冊的其他事件處理程式的調用，例如：
如果在與同一進制素相同的事件類型上注冊了多個事件處理程式，則在觸發此事件時，将按添加它們的順序調用它們，并且如果在其中一個事件處理程式中執行 stopImmediatePropagation（） 方法，則不會調用其餘的事件偵聽器，例如：
其他屬性：時間戳，隻讀，建立事件時的時間戳，以毫秒為機關;
例如，您可以計算滑鼠移動速度以顯示每秒移動的像素數，例如：
IsTrusted，隻讀布爾值，DOM3添加，表示 true，表示事件是由浏覽器生成的（例如使用者單擊），而 false 是由腳本建立的;
isTrusted屬性通常用于檢查事件是否受信任，如果它是使用者操作的，它肯定是可信的，但在IE中，除了使用thecreevent（）方法建立的事件之外，所有事件都是可信的;
IE 中的事件對象：
在IE中，有幾種方法可以通路事件對象，具體取決于指定事件處理程式的方法;
如果使用 atachEvent（） 添加它，則事件對象将作為參數傳遞到事件處理程式函數中;
如果通過 HTML 屬性指定事件處理程式，則可以通過名為 eent 的變量通路事件對象：
IE 中事件對象的屬性和方法：
IE中的事件對象還包含與建立它的事件相關的屬性和方法。其中許多屬性和方法對應于DOM的事件對象屬性和方法;并且這些屬性和方法因事件類型而異，因為以下是通用成員：屬性/方法類型讀/寫說明
cancelBubble BooleanR/W 預設為 false，将其設定為 true 會取消事件氣泡（與 topPropagation（） 方法相同）;
ReturnValue BooleanR/W 預設為 true，将其設定為 false 将取消事件的預設行為（與 DOM 中的 premiereDefault（） 方法相同）;
srcElement ElementR event target（與 DOM 中的目标屬性相同）;
StringR 類型是觸發的事件的類型
IE 中事件處理程式的作用域由其指定方式确定，是以不能假定此事件将始終等于事件目标，是以最好使用 event.srcElement，例如：
returnValue 屬性等效于 DOM 中的 premiereDefault（） 方法，該方法旨在取消給定事件的預設行為（預設為 true），并通過将屬性值設定為 false 來阻止預設行為，例如：
cancelBubble 屬性的工作方式與 DOM 中的 topPropagation（） 方法相同，用于停止事件傳播，但由于 IE 不支援事件捕獲，是以隻能取消事件冒泡，而 topPropagation（） 可以同時取消事件捕獲和冒泡;
将跨浏覽器事件添加到事件.js;
應用：