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   }

  • 相关阅读:
    ImportError: FloatProgress not found. Please update jupyter and ipywidgets.问题
    运行jupyter notebook显示ImportError: cannot import name 'secure_write',导致始终显示In[*]问题,服务器挂掉
    anaconda中jupyter notebook安装代码自动补全插件,报错“Exception: Jupyter command `jupyter-contrib` not found.”
    Hadoop集群(第7期)_Eclipse开发环境设置
    Hadoop集群(第6期)_WordCount运行详解
    Hadoop集群(第5期)_Hadoop安装配置
    Hadoop集群(第4期)_SecureCRT使用
    Hadoop集群(第3期)_VSFTP安装配置
    Hadoop(2)_机器信息分布表
    Hadoop(1)
  • 原文地址:https://www.cnblogs.com/dongxiaodong/p/10420031.html
Copyright © 2011-2022 走看看