这篇文章主要给大家介绍了关于 JavaScript 中事件与异常捕获的相关资料, 文中通过示例代码介绍的非常详细, 写的十分的全面细致, 具有一定的参考价值, 对此有需要的朋友可以参考学习下. 如有不足之处, 欢迎批评指正.
事件处理
[onClick] 单击事件,[onMouseOver] 鼠标经过事件,[onMouseOut] 鼠标移出事件,[onChange] 文本内容改变事件,[onSelect] 文本被框选事件,[onFoucus] 得到光标事件,[onBlur] 光标失去事件,[onLoad] 网页加载事件 (在 body 标签中添加),[onUnload] 网页关闭事件 (在 body 标签中添加或者使用 Windows.onload=function(){} )
事件注册及监听
1, DOM0 级事件处理
在标签中添加 onClick 或其他事件的属性并赋值为 JS 的自定义方法名
onClick="dongfun(20)"
两种方法在事件中得到事件的标签对象:
- <div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">JavaScript</div>
- <script>
- // 通过参数传递对象
- function overbut(obj){
- obj.innerhtml="事件触发发, 鼠标在我的范围";
- }
- // 通过 ID 查找到对象
- function outbut(){
- document.getElementById("divid").innerHTML="再见见";
- }// 在此我向大家推荐一个前端全栈开发交流圈: 619586920 突破技术瓶颈, 提升思维能力
- </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("JavaScript 弹框");
- }
- // 找到对象
- 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 -----");
- }// 在此我向大家推荐一个前端全栈开发交流圈: 619586920 突破技术瓶颈, 提升思维能力
- // 移除点击事件
- 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>
页面加载完毕监听:
- Windows.onload=function(){
- alert("页面加载完毕");
- }// 在此我向大家推荐一个前端全栈开发交流圈: 619586920 突破技术瓶颈, 提升思维能力
异常捕获
如果程序执行时遇到异常且未进行异常捕获, 则程序将终止执行, 如果有异常捕获, 则可以继续执行异常以下的代码.
捕获所有异常:
- try{
- //alert(jj);// 未定义变量异常
- throw("JavaScript 异常");// 手动抛出异常, 参数为异常内容
- }catch(e){
- alert("捕获的错误:"+e);
- }
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
获取资料
来源: http://www.qdfuns.com/article/51117/a2a113da34421bc18c436154ae23d2a5.html