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


Posted in Javascript onFebruary 24, 2019

事件处理

【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 相关文章推荐
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
Vue自定义属性实例分析
Feb 23 #Javascript
Vue动态组件与异步组件实例详解
Feb 23 #Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 #Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 #Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js实现楼层导航功能
2017/02/23 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Python 字符串中的字符倒转
2008/09/06 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python引用DLL文件的方法
2015/05/11 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
numpy返回array中元素的index方法
2018/06/27 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
青年文明号事迹材料
2014/01/18 职场文书
服务承诺书怎么写
2014/05/24 职场文书
优质服务口号
2014/06/11 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
vue判断按钮是否可以点击
2022/04/09 Vue.js