JavaScript的事件及异常捕获

事件处理

【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      outbut(){
 9        document.getElementById("divid").innerHTML="再见见"10 11 </script>

内容改变监听:

方法一

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

方法二

1 id="inid" onChange="inputbut(this)">
2 script3     function inputbut(obj){
4         obj.style.backgroundColor="green;//更改样式    
5 6 </>

2、 DOM1级事件处理

通过标签或者ID寻找到对象,进行事件监听,一个事件只能对应一个事件处理函数,在HTML中不用进行注册

 dongfunx(){
2         alert("东小东弹框");
3 4 找到对象
5 var h1objx=document.getElementsByTagName("h1")[0];
注册事件
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" 8     
 9 事件处理函数
 onck1(){
11     alert("----- onck1 -----"); 
12  }
13  onck2(){
14      alert("----- onck2 -----"15 }
16     
17 移除点击事件
18 divobjx.removeEventListener("click",onck1);

匿名方法实现

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

补充:

阻止HTML的默认事件

 1 <a href="https://www.cnblogs.com/dongxiaodong/">跳转</a>
 3      dongfunx(eventx){
 4         eventx.preventDefault();阻止默认事件,不进行跳转
 6     var aobjx=document.getElementsByTagName("a")[0 9     aobjx.onclick=10 </script>

页面加载完毕监听:

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

异常捕获

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

捕获所有异常:

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)