JavaScript中的事件與異常捕獲詳析
事件處理
【onClick】單擊事件、【onMouseOver】鼠標(biāo)經(jīng)過事件、【onMouseOut】鼠標(biāo)移出事件、【onChange】文本內(nèi)容改變事件、【onSelect】文本被框選事件、【onFoucus】得到光標(biāo)事件、【onBlur】光標(biāo)失去事件、【onLoad】網(wǎng)頁加載事件（在body標(biāo)簽中添加）、【onUnload】網(wǎng)頁關(guān)閉事件（在body標(biāo)簽中添加或者使用window.onload=function(){} ）
事件注冊及監(jiān)聽
1、 DOM0級事件處理
在標(biāo)簽中添加onClick或其他事件的屬性并賦值為JS的自定義方法名
onClick="dongfun(20)"
兩種方法在事件中得到事件的標(biāo)簽對象：
<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">東小東</div>
<script>
//通過參數(shù)傳遞對象
function overbut(obj){
obj.innerHTML="事件觸發(fā)發(fā)，鼠標(biāo)在我的范圍";
}
//通過ID查找到對象
function outbut(){
document.getElementById("divid").innerHTML="再見見";
}
</script>
內(nèi)容改變監(jiān)聽：
方法一
<input onChange="this.style.backgroundColor='red'">
方法二
<input id="inid" onChange="inputbut(this)">
<script>
function inputbut(obj){
obj.style.backgroundColor="green";//更改樣式
}
</script>
2、 DOM1級事件處理
通過標(biāo)簽或者ID尋找到對象，進(jìn)行事件監(jiān)聽，一個(gè)事件只能對應(yīng)一個(gè)事件處理函數(shù)，在HTML中不用進(jìn)行注冊
function dongfunx(){
alert("東小東彈框");
}
//找到對象
var h1objx=document.getElementsByTagName("h1")[0];
//注冊事件
h1objx.onclick=dongfunx;
//清除事件
h1objx.onclick=null;
3、 DOM2級事件處理
通過標(biāo)簽或者ID尋找到對象，進(jìn)行事件監(jiān)聽，一個(gè)事件只能對應(yīng)多個(gè)事件處理函數(shù)，在HTML中不用進(jìn)行注冊
//通過ID找到標(biāo)簽對象
divobjx=document.getElementById("divid");
//添加監(jiān)聽事件，可以添加多個(gè)相同或者不同的事件
//參數(shù)（事件名，處理函數(shù)名），其中事件名是普通事件中去掉“on”前綴
divobjx.addEventListener("click",onck1);
divobjx.addEventListener("click",onck2);
//事件處理函數(shù)
function onck1(){
alert("----- onck1 -----");
}
function onck2(){
alert("----- onck2 -----");
}
//移除點(diǎn)擊事件
divobjx.removeEventListener("click",onck1);
匿名方法實(shí)現(xiàn)
divobjx=document.getElementById("divid");
divobjx.addEventListener("click",function(){
//執(zhí)行操作內(nèi)容
alert("----------");
});
補(bǔ)充：
阻止HTML的默認(rèn)事件
<a rel="external nofollow" >跳轉(zhuǎn)</a>
<script>
function dongfunx(eventx){
eventx.preventDefault();//阻止默認(rèn)事件，不進(jìn)行跳轉(zhuǎn)
}
//找到對象
var aobjx=document.getElementsByTagName("a")[0];
//注冊事件
aobjx.onclick=dongfunx;
</script>
頁面加載完畢監(jiān)聽：
window.onload=function(){
alert("頁面加載完畢");
}
異常捕獲
如果程序執(zhí)行時(shí)遇到異常且未進(jìn)行異常捕獲，則程序?qū)⒔K止執(zhí)行，如果有異常捕獲，則可以繼續(xù)執(zhí)行異常以下的代碼。
捕獲所有異常：
try{
//alert(jj);//未定義變量異常
throw("東小東異常");//手動(dòng)拋出異常，參數(shù)為異常內(nèi)容
}catch(e){
alert("捕獲的錯(cuò)誤:"+e);
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
javascript中的Base64、UTF8編碼與解碼詳解
本文給大家介紹的是javascript中的Base64、UTF8編碼與解碼的函數(shù)源碼分享以及使用范例，十分實(shí)用，推薦給小伙伴們，希望大家能夠喜歡。2015-03-03
KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定
Knockout是一個(gè)以數(shù)據(jù)模型（data model）為基礎(chǔ)的能夠幫助你創(chuàng)建富文本，響應(yīng)顯示和編輯用戶界面的JavaScript類庫。這篇文章介紹了KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定的相關(guān)知識(shí)，感興趣的朋友一起看看吧2016-10-10
js項(xiàng)目中雙向數(shù)據(jù)綁定的簡單實(shí)現(xiàn)方法
雙向數(shù)據(jù)綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力,反之亦然,下面這篇文章主要給大家介紹了關(guān)于js項(xiàng)目中雙向數(shù)據(jù)綁定的簡單實(shí)現(xiàn)方法,需要的朋友可以參考下2021-08-08
移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章詳細(xì)解析了javascript遍歷控件實(shí)例，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式,結(jié)合完整實(shí)例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下2021-10-10
javascript實(shí)現(xiàn)tab響應(yīng)式切換特效
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)tab響應(yīng)式切換特效，以一個(gè)完整的實(shí)例對tab響應(yīng)式切換特效進(jìn)行詳細(xì)的分析，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實(shí)例，這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件，需要的朋友可以參考下2022-06-06
uniapp小程序中實(shí)現(xiàn)無縫銜接滾動(dòng)效果代碼示例
這篇文章主要介紹了uniapp小程序中實(shí)現(xiàn)無縫銜接滾動(dòng)效果的相關(guān)資料,該方法可以實(shí)現(xiàn)滾動(dòng)內(nèi)容中字的不同的顏色更改,并且可以根據(jù)需要進(jìn)行藝術(shù)化更改和自定義滾動(dòng)速度,需要的朋友可以參考下2025-05-05
JS實(shí)現(xiàn)的冒泡排序，快速排序，插入排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的冒泡排序，快速排序，插入排序算法,結(jié)合實(shí)例形式分析了javascript冒泡排序，快速排序，插入排序算法的相關(guān)原理及實(shí)現(xiàn)方法,需要的朋友可以參考下2019-03-03