JavaScript中的事件與異常捕獲詳析
事件處理
【onClick】單擊事件、【onMouseOver】鼠標(biāo)經(jīng)過(guò)事件、【onMouseOut】鼠標(biāo)移出事件、【onChange】文本內(nèi)容改變事件、【onSelect】文本被框選事件、【onFoucus】得到光標(biāo)事件、【onBlur】光標(biāo)失去事件、【onLoad】網(wǎng)頁(yè)加載事件(在body標(biāo)簽中添加)、【onUnload】網(wǎng)頁(yè)關(guān)閉事件(在body標(biāo)簽中添加或者使用window.onload=function(){} )
事件注冊(cè)及監(jiān)聽(tīng)
1、 DOM0級(jí)事件處理
在標(biāo)簽中添加onClick或其他事件的屬性并賦值為JS的自定義方法名
onClick="dongfun(20)"
兩種方法在事件中得到事件的標(biāo)簽對(duì)象:
<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">東小東</div>
<script>
//通過(guò)參數(shù)傳遞對(duì)象
function overbut(obj){
obj.innerHTML="事件觸發(fā)發(fā),鼠標(biāo)在我的范圍";
}
//通過(guò)ID查找到對(duì)象
function outbut(){
document.getElementById("divid").innerHTML="再見(jiàn)見(jiàn)";
}
</script>
內(nèi)容改變監(jiān)聽(tīng):
方法一
<input onChange="this.style.backgroundColor='red'">
方法二
<input id="inid" onChange="inputbut(this)">
<script>
function inputbut(obj){
obj.style.backgroundColor="green";//更改樣式
}
</script>
2、 DOM1級(jí)事件處理
通過(guò)標(biāo)簽或者ID尋找到對(duì)象,進(jìn)行事件監(jiān)聽(tīng),一個(gè)事件只能對(duì)應(yīng)一個(gè)事件處理函數(shù),在HTML中不用進(jìn)行注冊(cè)
function dongfunx(){
alert("東小東彈框");
}
//找到對(duì)象
var h1objx=document.getElementsByTagName("h1")[0];
//注冊(cè)事件
h1objx.onclick=dongfunx;
//清除事件
h1objx.onclick=null;
3、 DOM2級(jí)事件處理
通過(guò)標(biāo)簽或者ID尋找到對(duì)象,進(jìn)行事件監(jiān)聽(tīng),一個(gè)事件只能對(duì)應(yīng)多個(gè)事件處理函數(shù),在HTML中不用進(jìn)行注冊(cè)
//通過(guò)ID找到標(biāo)簽對(duì)象
divobjx=document.getElementById("divid");
//添加監(jiān)聽(tīng)事件,可以添加多個(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)
}
//找到對(duì)象
var aobjx=document.getElementsByTagName("a")[0];
//注冊(cè)事件
aobjx.onclick=dongfunx;
</script>
頁(yè)面加載完畢監(jiān)聽(tīng):
window.onload=function(){
alert("頁(yè)面加載完畢");
}
異常捕獲
如果程序執(zhí)行時(shí)遇到異常且未進(jìn)行異常捕獲,則程序?qū)⒔K止執(zhí)行,如果有異常捕獲,則可以繼續(xù)執(zhí)行異常以下的代碼。
捕獲所有異常:
try{
//alert(jj);//未定義變量異常
throw("東小東異常");//手動(dòng)拋出異常,參數(shù)為異常內(nèi)容
}catch(e){
alert("捕獲的錯(cuò)誤:"+e);
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
詳解JavaScript原始數(shù)據(jù)類(lèi)型Symbol
以前提到 JavaScript 原始數(shù)據(jù)類(lèi)型時(shí),我們知道有Number,String,Null,Boolean,Undefined這幾種。ES6 引入了新的基本數(shù)據(jù)類(lèi)型Symbol和BigInt。今天我們就來(lái)了解下Symbol類(lèi)型。Symbol類(lèi)型是為了解決屬性名沖突的問(wèn)題,順帶還具備模擬私有屬性的功能。2021-05-05
Bootstrap學(xué)習(xí)筆記之css組件(3)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記中的css組件,感興趣的小伙伴們可以參考一下2016-06-06
三種動(dòng)態(tài)加載js的jquery實(shí)例代碼另附去除js方法
這篇文章主要介紹了三種動(dòng)態(tài)加載js的jquery實(shí)例代碼另附去除js方法,需要的朋友可以參考下2014-04-04
js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效,圖片輪播效果特別適合做產(chǎn)品展示,具有很強(qiáng)的立體效果,感興趣的小伙伴可以參考下。2015-09-09
JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法
這篇文章主要介紹了JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法 的相關(guān)資料,需要的朋友可以參考下2016-06-06
JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁(yè)地址的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁(yè)地址的方法,涉及javascript動(dòng)態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04

