JavaScript中如何实现事件绑定与异常捕获的详细过程？

本文共计844个文字，预计阅读时间需要4分钟。

事件处理：[onClick] 单击事件、[onMouseOver] 鼠标经过事件、[onMouseOut] 鼠标移出事件、[onChange] 文本内容改变事件、[onSelect] 文本被选中事件、[onFocus] 获得光标事件、[onBlur] 失去光标事件。

事件处理

单击事件、鼠标经过事件、鼠标移出事件、文本内容改变事件、文本被框选事件、得到光标事件、光标失去事件、网页加载事件（在body标签中添加）、网页关闭事件（在body标签中添加或者使用window.onload=function(){} ）

事件注册及监听

1、 DOM0级事件处理

在标签中添加onClick或其他事件的属性并赋值为JS的自定义方法名

onClick="dongfun(20)"

两种方法在事件中得到事件的标签对象：

<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">东小东</div> <script> //通过参数传递对象 function overbut(obj){ obj.innerHTML="事件触发发，鼠标在我的范围"; } //通过ID查找到对象 function outbut(){ document.getElementById("divid").innerHTML="再见见"; } </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("东小东弹框"); } //找到对象 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 -----"); } //移除点击事件 divobjx.removeEventListener("click",onck1);

匿名方法实现

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

补充：

阻止HTML的默认事件

<a href="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("页面加载完毕"); }

异常捕获

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

捕获所有异常：

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对自由互联的支持。