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

事件处理

【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()">JavaScript</div>
<script>
 //通过参数传递对象
 function overbut(obj){
 obj.innerHTML="事件触发发，鼠标在我的范围";
 }
 //通过ID查找到对象
 function outbut(){
 document.getElementById("divid").innerHTML="再见见";
 }//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力
</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("JavaScript弹框");
 }
//找到对象
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 -----"); 
}//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力
  
//移除点击事件
divobjx.removeEventListener("click",onck1);

匿名方法实现

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

补充：
阻止HTML的默认事件

<a href="https://www.cnblogs.com/dongxiaodong/" rel="external nofollow" >跳转</a>
<script>
 function dongfunx(eventx){
 eventx.preventDefault();//阻止默认事件，不进行跳转
 }
 //找到对象
 var aobjx=document.getElementsByTagName("a")[0];
 //注册事件
 aobjx.onclick=dongfunx;
</script>

页面加载完毕监听：

window.onload=function(){
alert("页面加载完毕");
}//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力

异常捕获

如果程序执行时遇到异常且未进行异常捕获，则程序将终止执行，如果有异常捕获，则可以继续执行异常以下的代码。
捕获所有异常：

try{
 //alert(jj);//未定义变量异常
 throw("JavaScript异常");//手动抛出异常，参数为异常内容
}catch(e){
 alert("捕获的错误:"+e);
 }

结语

感谢您的观看，如有不足之处，欢迎批评指正。

获取资料

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：619586920，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。