zoukankan      html  css  js  c++  java
  • JavaScript的事件及异常捕获

    事件处理

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

    事件注册及监听

    1、 DOM0级事件处理

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

    onClick="dongfun(20)"

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

     1 <div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">东小东</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>

    内容改变监听:

    方法一

    <input onChange="this.style.backgroundColor='red'">    

    方法二

    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中不用进行注册

    1 function dongfunx(){
    2         alert("东小东弹框");
    3     }
    4 //找到对象
    5 var h1objx=document.getElementsByTagName("h1")[0];
    6 //注册事件
    7 h1objx.onclick=dongfunx;
    8 //清除事件
    9 h1objx.onclick=null;

    3、 DOM2级事件处理

    通过标签或者ID寻找到对象,进行事件监听,一个事件只能对应多个事件处理函数,在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);

    匿名方法实现

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

    补充:

    阻止HTML的默认事件

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

    页面加载完毕监听:

    1 window.onload=function(){
    2     alert("页面加载完毕");
    3 }

    异常捕获

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

    捕获所有异常:

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

  • 相关阅读:
    洛谷 P1226 【模板】快速幂||取余运算 题解
    洛谷 P2678 跳石头 题解
    洛谷 P2615 神奇的幻方 题解
    洛谷 P1083 借教室 题解
    洛谷 P1076 寻宝 题解
    洛谷 UVA10298 Power Strings 题解
    洛谷 P3375 【模板】KMP字符串匹配 题解
    Kafka Shell基本命令
    Mybatis与Hibernate的详细对比
    MyBatis简介
  • 原文地址:https://www.cnblogs.com/dongxiaodong/p/10420031.html
Copyright © 2011-2022 走看看