Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

JavaScript的事件及异常捕获

东小东 2019-02-23 23:53:00 阅读数:190 评论数:0 点赞数:0 收藏数:0

事件处理

【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

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;