继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript的事件及异常捕获

暮色呼如
关注TA
已关注
手记 247
粉丝 86
获赞 309

事件处理

【onClick】单击事件、【onMouseOver】鼠标经过事件、【onMouseOut】鼠标移出事件、【onChange】文本内容改变事件、【onSelect】文本被框选事件、【onFoucus】得到光标事件、【onBlur】光标失去事件、【onLoad】网页加载事件(在body标签中添加)、【onUnload】网页关闭事件(在body标签中添加或者使用window.onload=function(){})

事件注册及监听

1、 DOM0级事件处理

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

onClick="dongfun(20)"

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

复制代码

 1 <div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">东小东</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>

复制代码

内容改变监听:

方法一

<input onChange="this.style.backgroundColor='red'">

方法二

复制代码

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中不用进行注册

复制代码

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

复制代码

3、 DOM2级事件处理

通过标签或者ID寻找到对象,进行事件监听,一个事件只能对应多个事件处理函数,在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 }16     17 //移除点击事件18 divobjx.removeEventListener("click",onck1);

复制代码

匿名方法实现

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

补充:

阻止HTML的默认事件

复制代码

 1 <a href="https://www.cnblogs.com/dongxiaodong/">跳转</a> 2 <script> 3     function dongfunx(eventx){ 4         eventx.preventDefault();//阻止默认事件,不进行跳转 5     } 6     //找到对象 7     var aobjx=document.getElementsByTagName("a")[0]; 8     //注册事件 9     aobjx.onclick=dongfunx;10 </script>

复制代码

页面加载完毕监听:

1 window.onload=function(){2     alert("页面加载完毕");3 }

异常捕获

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

捕获所有异常:

复制代码

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

复制代码

作者:东小东

原文出处:https://www.cnblogs.com/dongxiaodong/p/10420031.html  

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP