欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-25 22:55:02
事件处理 【onclick】单击事件、【onmouseover】鼠标经过事件、【onmouseout】鼠标移出事件、【onchange】文本内容改变事件、【onsel...

事件处理

【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()">东小东</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="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("页面加载完毕");
 }

异常捕获

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

捕获所有异常:

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

总结

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