js监听多个事件_JavaScript中的事件与异常捕获解析

这篇文章主要给大家介绍了关于JavaScript中事件与异常捕获的相关资料,文中通过示例代码介绍的非常详细,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

25a7c0e3c56c26f475b9621c3335dcdf.png

事件处理

【onClick】单击事件、【onMouseOver】鼠标经过事件、【onMouseOut】鼠标移出事件、【onChange】文本内容改变事件、【onSelect】文本被框选事件、【onFoucus】得到光标事件、【onBlur】光标失去事件、【onLoad】网页加载事件(在body标签中添加)、【onUnload】网页关闭事件(在body标签中添加或者使用window.οnlοad=function(){} )
事件注册及监听1、 DOM0级事件处理

在标签中添加onClick或其他事件的属性并赋值为JS的自定义方法名

HTML复制全屏
1
onClick="dongfun(20)"

两种方法在事件中得到事件的标签对象:

HTML复制全屏
1
<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">JavaScript</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>

内容改变监听:
方法一

HTML复制全屏
1
<input onChange="this.style.backgroundColor='red'">

方法二

HTML复制全屏
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中不用进行注册

HTML复制全屏
1
function dongfunx(){
2
alert("JavaScript弹框");
3
}
4
//找到对象
5
var h1objx=document.getElementsByTagName("h1")[0];
6
//注册事件
7
h1objx.οnclick=dongfunx;
8
//清除事件
9
h1objx.οnclick=null;

3、 DOM2级事件处理

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

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);

匿名方法实现

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

补充:
阻止HTML的默认事件

HTML复制全屏
1
<a href="https://www.cnblogs.com/dongxiaodong/" rel="external nofollow" >跳转</a>
2
<script>
3
function dongfunx(eventx){
4
eventx.preventDefault();//阻止默认事件,不进行跳转
5
}
6
//找到对象
7
var aobjx=document.getElementsByTagName("a")[0];
8
//注册事件
9
aobjx.οnclick=dongfunx;
10
</script>

页面加载完毕监听:

HTML复制全屏
1
window.οnlοad=function(){
2
alert("页面加载完毕");
3
}//

异常捕获

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

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

结语

想学前端的看我个性签名哦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292480.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GDUFE ACM-1045

题目&#xff1a;http://acm.gdufe.edu.cn/Problem/read/id/1045 Elevator Time Limit: 2000/1000ms (Java/Others) Problem Description: The highest building in our city has only one elevator. A request list is made up with N positive numbers. The numbers denote a…

mongodb的IO测试工具 mongoperf

之前没发现mongoperf这个工具&#xff0c;测试IO的状态用的是iostat来进行观察。 mongoperf < myjsonconfigfile echo "{nThreads:2,fileSizeMB:20,w:true,r:true}" | mongoperf参数示列如下&#xff1a; {nThreads:<n>, fileSizeMB:<n>, sleepMicros…

C#多线程开发-使用并发集合

前言大家好&#xff0c;我是阿辉。在C#语言中当需要处理并发的场景时&#xff0c;就需要程序员使用最合理的数据结构。那么哪些数据结构是支持和可以在并行计算中被使用的呢。首先这些数据结构具备可伸缩性&#xff0c;尽可能地避免锁(会造成多个线程的等待&#xff0c;防止资源…

Android之用sharedUserId来实现不同应用(APK)数据共享

android:sharedUserId 当APK安装的时候&#xff0c;userid这个标志就会产生。APK在设备上的整个生命周期中&#xff0c;这个ID不再改变。不同设备上同一个应用包可能有不同的userid&#xff0c;重要的是在给定的设备上&#xff0c;每个应用包有自己独立的userid。 userid的特点…

windows 下安装wamp环境

一直以来都是学习在Linux下安装lanmp环境&#xff0c;在Windows下都是用的集成工具比如appserv现在来安装Windows版本的lamp都是从官网下载的资源在Windows下以后还会编辑更多的东西。我的文章都会以后都有更新&#xff0c;因为有时候有点想法&#xff0c;如果不实践的话会忘记…

python编程发展_编程的发展史及Python简介

一.编程语言演变史编程语言分为三类&#xff0c;分别是机器语言&#xff0c;汇编语言和高级程序语言。1.机器语言&#xff1a;用0和1表示二进制跟计算机进行直接的沟通交流&#xff0c;对硬件进行直接操作。2.汇编语言&#xff1a;用简单的英文标签来表示二进制数&#xff0c;对…

iOS ShareSDK 使用

流量精灵软件中&#xff0c;也在大部分地方使用到了shareSDK 这个三方开源库。具体的有两种需求 a、弹出所有分享模块 b、只弹出指定的平台&#xff1a;如微信朋友圈和QQ 。 配置方法&#xff0c;三方库中也很详细&#xff0c;这里我只有写出自出自己代码实现的部分 这里只写自…

应用环境下的TIME_WAIT和CLOSE_WAIT

转载自&#xff1a;http://blog.csdn.net/shootyou/article/details/6622226 昨天解决了一个HttpClient调用错误导致的服务器异常&#xff0c;具体过程如下&#xff1a;http://blog.csdn.net/shootyou/article/details/6615051里头的分析过程有提到&#xff0c;通过查看服务器网…

当社恐和社恐相亲时,场面会有多尴尬?

1 俄国人真实在&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 alone和lonely的区别&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 她可能怕她男朋友伤害到别人&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 真正的笋到家了&#xff08;…

FlexPod上安装vSphere 5.5配置中的排错(1)

delxu原创文档&#xff0c;转发请一定要标记本文出处和原文URL。 这些日子在进行FlexPod上的vSphere 5.5的安装和配置&#xff0c;过程中遇到一些故障、困难&#xff0c;都一一解决了。觉得有必要和大家分享一下。可能会有好多篇&#xff0c;也可能和以前一样&#xff0c;虎头蛇…

Android插件化开发之动态加载三个关键问题详解

本文摘选自任玉刚著《Android开发艺术探索》&#xff0c;介绍了Android插件化技术的原理和三个关键问题&#xff0c;并给出了作者自己发起的开源插件化框架。 动态加载技术&#xff08;也叫插件化技术&#xff09;在技术驱动型的公司中扮演着相当重要的角色&#xff0c;当项目越…

python正十三边形_一起学python-opencv十三(直方图反向投影和模板匹配)

2D直方图https://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_imgproc/py_histograms/py_2d_histogram/py_2d_histogram.html#twod-histogram为什么只考虑h,s就够了呢&#xff1f;因为其实亮度是很容易受外界影响的&#xff0c;我们认为一个颜色的本质特…

Laravel 学习笔记之 Query Builder 源码解析(下)

说明&#xff1a;本文主要学习下Query Builder编译Fluent Api为SQL的细节和执行SQL的过程。实际上&#xff0c;上一篇聊到了\Illuminate\Database\Query\Builder这个非常重要的类&#xff0c;这个类含有三个主要的武器&#xff1a;MySqlConnection, MySqlGrammar, MySqlProcess…

退出Activity(转)

退出Activity如何退出Activity&#xff1f;如何安全退出已调用多个Activity的Application&#xff1f; 退出activity 直接调用 finish () 方法 . //用户点击back键 就是退出一个activity 退出activity 会执行 onDestroy()方法 . 1、抛异常强制退出&#xff1a; 该方法通过抛异…

更方便地模拟 Http 响应

更方便地 Mock Http ResponseIntro在我们的业务代码中往往会有很多调用内部其他 team 或者是第三方的一些服务&#xff0c;在编写单元测试代码时&#xff0c;往往需要 Mock Http Response 来模拟更好可能的返回结果&#xff0c;我封装了一个简单的 Http Handler 来简化 Mock 过…

xmanager远程桌面控制linux

更多博文请关注&#xff1a;没有伞的孩子必须努力奔跑(www.xuchanggang.cn)一、在linux端配置1.默认&#xff0c;你安装好系统gdm已经安装&#xff0c;不做解释2.配置gdm(1).修改 /etc/gdm/custom.conf 文件&#xff0c;替换为下面内容[daemon] RemoteGreeter/usr/libexec/gdmg…

男人的快乐可以多简单?

1 说不出哪里像但是非常像&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 质量不错&#xff0c;就是风大不建议穿&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 谈恋爱的要求&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 当给狗狗看了捕…

Android插件化开发之用DexClassLoader加载未安装的APK资源文件来实现app切换背景皮肤

第一步、先制做一个有我们需要的图片资源的APK 如下图&#xff0c;这里有个about_log.png,我们需要生成apk文件。生成的apk文件如果你不到项目的文件夹里面去取apk&#xff0c;想通过命令放到手机里面去可以快速用下面命令 1&#xff09;、在手机里面通过包名找到apk路径&…

python框架django文档_Django基础——Django框架介绍及模板语言

Django框架&#xff0c;我们只需要关心二点&#xff1a;1.根据用户访问不同的路径执行不同的函数2.从HTML读取出内容,并且完成字符串的替换而socket通信不需要我们自己写&#xff1b;新建Django项目命令行创建:django-admin startproject mysitepycharm创建:1. File --> New…