JavaScript中的事件与异常捕获解析

这篇文章主要给大家介绍了关于JavaScript中事件与异常捕获的相关资料，文中通过示例代码介绍的非常详细，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。

事件处理
【onClick】单击事件、【onMouseOver】鼠标经过事件、【onMouseOut】鼠标移出事件、【onChange】文本内容改变事件、【onSelect】文本被框选事件、【onFoucus】得到光标事件、【onBlur】光标失去事件、【onLoad】网页加载事件（在body标签中添加）、【onUnload】网页关闭事件（在body标签中添加或者使用window.οnlοad=function(){} ）
事件注册及监听
1、 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>

2、 DOM1级事件处理
通过标签或者ID寻找到对象，进行事件监听，一个事件只能对应一个事件处理函数，在HTML中不用进行注册
HTML复制全屏

1
function dongfunx(){
2
alert("JavaScript弹框");
3
}
4
//找到对象
5
var h1objx=document.getElementsByTagName("h1")[0];
6
//注册事件
7
h1objx.οnclick=dongfunx;
8
//清除事件
9
h1objx.οnclick=null;

3、 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.οnclick=dongfunx;
10
</script>

页面加载完毕监听：
HTML复制全屏

1
window.οnlοad=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（招募中）