avaScript是基于事件驅動的編程模型，當網頁頁面發生某種形式的交互操作或者變化時就會產生事件。舉個簡單的例子：用戶在網頁頁面點擊鼠標按鍵就會產生一個點擊事件。鼠標移動則會產生鼠標移動的事件。因此事件對于JavaScript客戶端腳本語言至關重要，在JavaScript編程模型中事件是實現一切前端交互操作的基礎與依據。事件的學習、理解與使用成為JavaScript編程學習的重點與難點。本文主要介紹部分常用事件及事件處理。

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事件使用描述如下圖：

以上給出了JavaScript中的事件基本概念及案例分析，如有問題可在評論區討論。本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！相關文章鏈接如下：

前端開發-JavaScript初學者練習題及參考答案

前端開發-CSS3動畫實現焦點(圖文輪播)圖效果

前端開發-JavaScript DOM動態生成文本框

前端設計-教你如何快速繪制HTML5動畫

前端設計-響應式頁面開發基礎

前端設計-Ajax技術及實例展示

件處理

【onClick】單擊事件、【onMouseOver】鼠標經過事件、【onMouseOut】鼠標移出事件、【onChange】文本內容改變事件、【onSelect】文本被框選事件、【onFoucus】得到光標事件、【onBlur】光標失去事件、【onLoad】網頁加載事件（在body標簽中添加）、【onUnload】網頁關閉事件（在body標簽中添加或者使用window.onload=function(){} ）

事件注冊及監聽

1、 DOM0級事件處理

在標簽中添加onClick或其他事件的屬性并賦值為JS的自定義方法名

onClick="dongfun(20)"

兩種方法在事件中得到事件的標簽對象：

<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">東小東</div>
<script>
 //通過參數傳遞對象
 function overbut(obj){
 obj.innerHTML="事件觸發發，鼠標在我的范圍";
 }
 //通過ID查找到對象
 function outbut(){
 document.getElementById("divid").innerHTML="再見見";
 }
</script>

內容改變監聽：

方法一

<input onChange="this.style.backgroundColor='red'">

方法二

<input id="inid" onChange="inputbut(this)">
<script>
 function inputbut(obj){
 obj.style.backgroundColor="green";//更改樣式 
 }
</script>

2、 DOM1級事件處理

通過標簽或者ID尋找到對象，進行事件監聽，一個事件只能對應一個事件處理函數，在HTML中不用進行注冊

function dongfunx(){
 alert("東小東彈框");
 }
//找到對象
var h1objx=document.getElementsByTagName("h1")[0];
//注冊事件
h1objx.onclick=dongfunx;
//清除事件
h1objx.onclick=null;

3、 DOM2級事件處理

通過標簽或者ID尋找到對象，進行事件監聽，一個事件只能對應多個事件處理函數，在HTML中不用進行注冊

//通過ID找到標簽對象
divobjx=document.getElementById("divid");
 
//添加監聽事件，可以添加多個相同或者不同的事件
//參數（事件名，處理函數名），其中事件名是普通事件中去掉“on”前綴
divobjx.addEventListener("click",onck1);
divobjx.addEventListener("click",onck2);
 
//事件處理函數
function onck1(){
 alert("----- onck1 -----"); 
 }
function onck2(){
 alert("----- onck2 -----"); 
}
 
//移除點擊事件
divobjx.removeEventListener("click",onck1);

匿名方法實現

divobjx=document.getElementById("divid");
divobjx.addEventListener("click",function(){
//執行操作內容
alert("----------");
});

補充：

阻止HTML的默認事件

<a  rel="external nofollow" >跳轉</a>
<script>
 function dongfunx(eventx){
 eventx.preventDefault();//阻止默認事件，不進行跳轉
 }
 //找到對象
 var aobjx=document.getElementsByTagName("a")[0];
 //注冊事件
 aobjx.onclick=dongfunx;
</script>

頁面加載完畢監聽：

window.onload=function(){
alert("頁面加載完畢");
}

異常捕獲

如果程序執行時遇到異常且未進行異常捕獲，則程序將終止執行，如果有異常捕獲，則可以繼續執行異常以下的代碼。

捕獲所有異常：

try{
 //alert(jj);//未定義變量異常
 throw("東小東異常");//手動拋出異常，參數為異常內容
}catch(e){
 alert("捕獲的錯誤:"+e);
 }

最后

以下是總結出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學習資料。

【領取方式】

關注頭條 前端全棧架構丶第一時間獲取最新前端資訊學習

手機用戶可私信關鍵詞 【前端】即可獲取全棧工程師路線和學習資料！