HTML DOM 05 事件(三)

2020-07-26 05:31:21 阅读：215 来源： 互联网

标签：function DOM 05 示例 innerHTML getElementById HTML document 加载

示例 7 :

加载事件

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

<script>
  function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
  }
  function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
  }
 
</script>
 
<body onl oad="loadBody()">
  <div id="message1"></div>
  <div id="message2"></div>
</body>
 
<img onl oad="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>

标签：function,DOM,05,示例,innerHTML,getElementById,HTML,document,加载
来源： https://www.cnblogs.com/JasperZhao/p/13379083.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML DOM 05 事件(三)

加载事件

当前组件

阻止事件的发生