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

 更新时间:2019年02月24日 10:13:52   投稿:daisy  
这篇文章主要给大家介绍了关于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()">东小东</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);
 }

总结

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

相关文章

  • javascript中的Base64、UTF8编码与解码详解

    javascript中的Base64、UTF8编码与解码详解

    本文给大家介绍的是javascript中的Base64、UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能够喜欢。
    2015-03-03
  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。这篇文章介绍了KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定的相关知识,感兴趣的朋友一起看看吧
    2016-10-10
  • js项目中双向数据绑定的简单实现方法

    js项目中双向数据绑定的简单实现方法

    双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然,下面这篇文章主要给大家介绍了关于js项目中双向数据绑定的简单实现方法,需要的朋友可以参考下
    2021-08-08
  • 移动端点击图片放大特效PhotoSwipe.js插件实现

    移动端点击图片放大特效PhotoSwipe.js插件实现

    这篇文章主要为大家详细介绍了移动端点击图片放大特效PhotoSwipe.js插件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript遍历控件实例详细解析

    javascript遍历控件实例详细解析

    这篇文章详细解析了javascript遍历控件实例,有需要的朋友可以参考一下
    2014-01-01
  • JavaScript工厂模式详解

    JavaScript工厂模式详解

    这篇文章主要介绍了JavaScript设计模式之工厂模式,结合完整实例形式分析了工厂模式的概念、原理及javascript定义与使用工厂模式的相关操作技巧,需要的朋友可以参考下
    2021-10-10
  • javascript实现tab响应式切换特效

    javascript实现tab响应式切换特效

    这篇文章主要为大家介绍了javascript实现tab响应式切换特效,以一个完整的实例对tab响应式切换特效进行详细的分析,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序自定义可搜索的picker组件示例详解

    微信小程序自定义可搜索的picker组件示例详解

    这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例,这里的搜索框使用的是vant微信小程序组件库,picker使用的微信小程序的原生组件,需要的朋友可以参考下
    2022-06-06
  • uniapp小程序中实现无缝衔接滚动效果代码示例

    uniapp小程序中实现无缝衔接滚动效果代码示例

    这篇文章主要介绍了uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自定义滚动速度,需要的朋友可以参考下
    2025-05-05
  • JS实现的冒泡排序,快速排序,插入排序算法示例

    JS实现的冒泡排序,快速排序,插入排序算法示例

    这篇文章主要介绍了JS实现的冒泡排序,快速排序,插入排序算法,结合实例形式分析了javascript冒泡排序,快速排序,插入排序算法的相关原理及实现方法,需要的朋友可以参考下
    2019-03-03

最新评论