当前位置: 首页 > 编程笔记 >

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

鲜于念
2023-03-14
本文向大家介绍JavaScript中的事件与异常捕获详析,包括了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 中,我们将事件发生的顺序称为“事件流”,当我们触发某个事件时,会发生一些列的连锁反应,例如有如下所示的一段代码: 如果给每个标签都定义事件,当我们点击其中的 标签时,会发现绑定在 和 标签上的事件也被触发了,这到底是为什么呢?为了解答这一问题,微软和网景两公司提出了两种不同的概念,事件捕获与事件冒泡: 事件捕获:由微软公司提出,事件从文档根节点(Document 对象)流

  • 问题内容: 我想知道其他SOer在实践中如何倾向于处理和/或防止异常。 您在什么情况下可以防止例外情况,以及如何防止例外情况?在什么情况下您会捕获异常? 通常,我通常会说“ NullPointerExceptions”(和其他类似的事件) 我发现在大多数情况下,这比使用try-catch块所涉及的所有事情要小。 当潜在异常更复杂或数量更多时,我使用try-catch块。 问题答案: 我认为,仅当引

  • 本节介绍如何使用三个异常处理程序组件(try、catch 和 finally)来编写异常处理程序。 然后,介绍了 Java SE 7中引入的 try-with-resources 语句。 try-with-resources 语句特别适合于使用Closeable的资源(例如流)的情况。 本节的最后一部分将通过一个示例来分析在各种情况下发生的情况。 以下示例定义并实现了一个名为ListOfNumbe

  • 我在输出在文件中创建的日期时遇到问题。 我一直在遵循一个关于如何创建真正基本的CMS平台的教程,帮助我了解和的一些基础知识,在我试图输出页面创建日期之前,一切都进展顺利。 这就是我得到的错误 现在,当我删除我的中的第22行时,它输出数据库中的完整日期,即,但我试图格式化它以显示像. 这是我的文件中的代码 然后在我的在我显示这个的地方,我有这个代码来格式化日期。 现在从我的中删除这个不会做任何事情,

  • 本文向大家介绍浅谈javascript中的事件冒泡和事件捕获,包括了浅谈javascript中的事件冒泡和事件捕获的使用技巧和注意事项,需要的朋友参考一下 1.事件冒泡   IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的HTML 页面为例: 如果你单击了页面中的<div

  • 我正在尝试使用Quarkus构建一个小型REST服务。我正在使用Hibernate和PostgreSQL数据库。它在所有好的情况下都非常有效。但是当出现Hibernate异常时,比如,我无法以正常方式捕获它们。异常被包装为其他异常和。因此,可以通过使用 存储库 资源 由于这个问题,也无法为HibernateException添加一个。是否有人遇到过类似的问题,或者我的代码存在一般性问题?我正在使用