JavaScript事件处理与异常捕获详解
本文详细解析JavaScript中的事件处理机制,涵盖从DOM0到DOM2级的事件注册与监听方法,包括如何获取事件对象、添加多个监听器及移除监听。同时介绍如何阻止HTML默认事件与页面加载监听,并阐述异常捕获对程序连续执行的重要性及try-catch语法的使用。
事件处理机制概述
事件处理
常见的Web事件包括:【onClick】单击事件、【onMouseOver】鼠标悬停事件、【onMouseOut】鼠标移出事件、【onChange】文本内容变更事件、【onSelect】文本选中事件、【onFocus】获取焦点事件、【onBlur】失去焦点事件、【onLoad】网页加载完成事件(需在body标签内定义)以及【onUnload】网页关闭事件(可在body标签内定义或通过window.onload=function(){}实现)。
事件注册与监听方法
事件注册及监听
1、DOM0级事件处理
在HTML标签中直接添加onClick或其他事件属性,并将值设置为JavaScript自定义函数的名称。
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获取DOM对象后,直接为对象的属性赋值来实现事件监听。此方式下,一个事件只能绑定一个处理函数,且无需在HTML中进行额外注册。
function dongfunx(){
alert("东小东弹框");
}
//找到对象
var h1objx=document.getElementsByTagName("h1")[0];
//注册事件
h1objx.onclick=dongfunx;
//清除事件
h1objx.onclick=null;
3、DOM2级事件处理
通过标签元素或ID获取DOM对象后,使用特定方法进行事件监听。与DOM1级不同,此方式允许一个事件绑定多个处理函数,且同样无需在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);
}
总结
以上就是本文的全部内容,希望这些内容对您的学习或工作具有参考价值。如有任何疑问,欢迎留言交流,感谢支持。
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
