JavaScript是基于事件驅動的程式設計模型，當網頁頁面發生某種形式的互動操作或者變化時就會産生事件。舉個簡單的例子：使用者在網頁頁面點選滑鼠按鍵就會産生一個點選事件。滑鼠移動則會産生滑鼠移動的事件。是以事件對于JavaScript用戶端腳本語言至關重要，在JavaScript程式設計模型中事件是實作一切前端互動操作的基礎與依據。事件的學習、了解與使用成為JavaScript程式設計學習的重點與難點。本文主要介紹部分常用事件及事件處理。
event事件
1、事件的類型與事件處理
在面向對象程式設計語言中，事件是依附于對象的。不同的對象具有不同類型的事件類型及事件處理的方法。JavaScript中一個事件主要由事件對象、事件類型與事件處理三部分所組成。JavaScript常用事件類型主要包括鍵盤事件、滑鼠與滾輪事件、頁面事件、表單事件、裝置事件等。在頁面運作過程中，JavaScript通過事件類型，檢測發生的事件，并對事件進行處理。事件處理程式響應事件、處理時間需要按照一定的順序執行，事件順序主要包括事件捕獲與時間冒泡兩種類型。其中事件捕獲從HTML最外層開始處理事件，直到底層元素事件的處理完成。事件冒泡則與事件捕獲相反，從子元素開始響應事件。在預設情況下消息響應都是從子元素開始的。
冒泡處理執行個體
冒泡處理執行個體如上圖，div元素嵌套，将兩個div分為父元素與子元素，同樣定義onclick單擊事件，首先響應的是内層子元素。
2、事件的綁定
除直接在對HTML元素直接定義事件屬性之外，還可以通過事件綁定形式實作事件的注冊、綁定與監聽。通過調用DOM文檔對象模型提供的addEventListener()方法實作為網頁頁面元素添加事件，該函數的原型描述如下：
addEventListenser(type,listener [，options ])type:事件類型listener:事件處理函數名稱options: bool類型，事件處理方式，捕獲、冒泡
通過對DOM對象進行事件綁定就可以響應制定的消息，但需注意，頁面元素能夠響應的事件類型。事件綁定執行個體描述如下：
事件監聽與處理
事件綁定執行個體如上圖所示，我們給id為test的div元素綁定了click事件，并用myfun函數對事件進行處理。其中事件類型是需要編寫者注意的問題，這些事件類型是定義好的，我們隻需要選擇即可，例如滑鼠事件的定義如下表所示：
滑鼠事件類型
除以上事件綁定之外，還可以通過以下簡單形式綁定事件，如上例題事件可通過一下語句定義：
事件綁定的簡單形式
3、事件的解除
通常情況下事件的綁定執行之後是不會移除事件的，但如果需要解除事件的綁定，則可以通過removeEventListener()方法或者對綁定事件的DOM對象對應時間名指派為null實作事件的解除。實際案例如下所示：
事件移除操作
4、event對象
event對象是JavaScript語言中重要的對象之一，用于存儲記錄互動響應實作相關基本資訊，event對象主要存儲資訊包括事件類型、事件對應的按鍵資訊及事件發生相關坐标資訊等。event對象是其他各類事件的父類，其他事件對象均為該類的子類。event對象會在事件調用過程中以隐藏的形式進行參數的傳遞。event事件使用描述如下圖：
event事件使用執行個體
以上給出了JavaScript中的事件基本概念及案例分析，如有問題可在評論區讨論。本頭條号長期關注程式設計資訊分享；程式設計課程、素材、代碼分享及程式設計教育訓練。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探讨。期待大家關注！相關文章連結如下：
前端開發-JavaScript初學者練習題及參考答案
前端開發-CSS3動畫實作焦點(圖文輪播)圖效果
前端開發-JavaScript DOM動态生成文本框
前端設計-教你如何快速繪制HTML5動畫
前端設計-響應式頁面開發基礎
前端設計-Ajax技術及執行個體展示