zoukankan      html  css  js  c++  java
  • HTML DOM 05 事件(三)

    示例 7 : 

    加载事件

    当整个文档加载成功,或者一个图片加载成功,会触发加载事件
    当body元素或者img@加载的时候,会触发onload事件

    <script>
      function loadBody(){
    document.getElementById("message1").innerHTML="文档加载成功";
      }
      function loadImg(){
    document.getElementById("message2").innerHTML="图片加载成功";
      }
     
    </script>
     
    <body onload="loadBody()">
      <div id="message1"></div>
      <div id="message2"></div>
    </body>
     
    <img onload="loadImg()" src="https://how2j.cn/example.gif"/>

    示例 8 : 

    当前组件

    this表示触发事件的组件,可以在调用函数的时候,作为参数传进去

    <input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
    <input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
     
    <br>
    <br>
    <div id="message"></div>
      
    <script>
    function singleClick(button){
    var s = "被点击的按钮上的文本是: "+button.value;
    document.getElementById("message").innerHTML=s;
    }
     
    </script>

     示例 9 : 

    阻止事件的发生

    比如在提交一个表单的时候,如果用户名为空,弹出提示,并阻止原本的提交
    1. 在调用函数的时候,增加一个return
    2. 在函数中,如果发现用户名为空,则返回false
    3. 当onSubmit得到的返回值是false的时候,表单的提交功能就被取消了

    <form method="post" action="/study/login.jsp" onsubmit="return login()">
    账号:<input id="name" type="text" name="name"> <br/>
    密码:<input type="password" name="password" > <br/>
    <input type="submit" value="登录">
    </form>
      
    <script>
      function login(){
       var name = document.getElementById("name");
       if(name.value.length==0){
         alert("用户名不能为空");
         return false;
       }
       return true;
        
      }
    </script>
  • 相关阅读:
    小米路由研究之中的一个加入菜单
    【Struts2学习笔记(9)】单文件上传和多文件上传
    isPostback 的原理及作用(很easy)
    1-2Html与CSS的关系
    【HTML5】实现QQ聊天气泡效果
    杭电1166敌兵布阵 (用的树状数组)
    安卓市场---框架搭建4
    qcow2 raw vhd 虚拟磁盘转换
    softlayer virtual machine vhd磁盘镜像导入shell脚本
    Openstack no valid hot
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/13379083.html
Copyright © 2011-2022 走看看