JavaScript中的事件與異常捕獲解析

這篇文章主要給你們介紹了關於JavaScript中事件與異常捕獲的相關資料，文中經過示例代碼介紹的很是詳細，寫的十分的全面細緻，具備必定的參考價值，對此有須要的朋友能夠參考學習下。若有不足之處，歡迎批評指正。

事件處理
【onClick】單擊事件、【onMouseOver】鼠標通過事件、【onMouseOut】鼠標移出事件、【onChange】文本內容改變事件、【onSelect】文本被框選事件、【onFoucus】獲得光標事件、【onBlur】光標失去事件、【onLoad】網頁加載事件（在body標籤中添加）、【onUnload】網頁關閉事件（在body標籤中添加或者使用window.onload=function(){} ）
事件註冊及監聽
一、 DOM0級事件處理
在標籤中添加onClick或其餘事件的屬性並賦值爲JS的自定義方法名
HTML複製全屏

1
onClick="dongfun(20)"

兩種方法在事件中獲得事件的標籤對象：
HTML複製全屏

1
<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">JavaScript</div>
2
<script>
3
//經過參數傳遞對象
4
function overbut(obj){
5
obj.innerHTML="事件觸發發，鼠標在個人範圍";
6
}
7
//經過ID查找到對象
8
function outbut(){
9
document.getElementById("divid").innerHTML="再見見";
10
}//
11
</script>

內容改變監聽：
方法一
HTML複製全屏

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

方法二
HTML複製全屏

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

二、 DOM1級事件處理
經過標籤或者ID尋找到對象，進行事件監聽，一個事件只能對應一個事件處理函數，在HTML中不用進行註冊
HTML複製全屏

1
function dongfunx(){
2
alert("JavaScript彈框");
3
}
4
//找到對象
5
var h1objx=document.getElementsByTagName("h1")[0];
6
//註冊事件
7
h1objx.onclick=dongfunx;
8
//清除事件
9
h1objx.onclick=null;

三、 DOM2級事件處理
經過標籤或者ID尋找到對象，進行事件監聽，一個事件只能對應多個事件處理函數，在HTML中不用進行註冊
HTML複製全屏

1
//經過ID找到標籤對象
2
divobjx=document.getElementById("divid");
3
​
4
//添加監聽事件，能夠添加多個相同或者不一樣的事件
5
//參數（事件名，處理函數名），其中事件名是普通事件中去掉「on」前綴
6
divobjx.addEventListener("click",onck1);
7
divobjx.addEventListener("click",onck2);
8
​
9
//事件處理函數
10
function onck1(){
11
alert("----- onck1 -----");
12
}
13
function onck2(){
14
alert("----- onck2 -----");
15
}//在此我向你們推薦一個前端學習交流羣：512，676，244 突破技術瓶頸，提高思惟能力
16
​
17
//移除點擊事件
18
divobjx.removeEventListener("click",onck1);

匿名方法實現
HTML複製全屏

1
divobjx=document.getElementById("divid");
2
divobjx.addEventListener("click",function(){
3
//執行操做內容
4
alert("----------");
5
});

補充：
阻止HTML的默認事件
HTML複製全屏

1
跳轉
2
<script>
3
function dongfunx(eventx){
4
eventx.preventDefault();//阻止默認事件，不進行跳轉
5
}
6
//找到對象
7
var aobjx=document.getElementsByTagName("a")[0];
8
//註冊事件
9
aobjx.onclick=dongfunx;
10
</script>

頁面加載完畢監聽：
HTML複製全屏

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

異常捕獲
若是程序執行時遇到異常且未進行異常捕獲，則程序將終止執行，若是有異常捕獲，則能夠繼續執行異常如下的代碼。
捕獲全部異常：
HTML複製全屏

1
try{
2
//alert(jj);//未定義變量異常
3
throw("JavaScript異常");//手動拋出異常，參數爲異常內容
4
}catch(e){
5
alert("捕獲的錯誤:"+e);
6
}

結語
「我本身是一名從事了5年前端的老程序員，辭職目前在作講師，今年年初我花了一個月整理了一份最適合2019年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各類框架都有整理，送給每一位前端小夥伴，這裏是小白彙集地，歡迎初學和進階中的小夥伴。"

加QQ羣：512676244（招募中）