首页 > Web开发 > 详细

HTML DOM 05 事件(二)

时间:2020-07-25 11:21:59      阅读:63      评论:0      收藏:0      [点我收藏+]

示例 4 : 

点击事件

点击事件,由单击,双击按两个事件组成
当在组件上单击的时候,会触发onclick事件
当在组件上双击的时候,会触发ondblclick事件
注1:在组件上,按下空格或则回车键也可以造成单击的效果,但是却不能造成双击的效果
注2: 自定义函数不要使用click(),这是保留函数名。

<input type="button" onclick="singleClick()" ondblclick="doubleClick()"  value="用于演示单击和双击" >
 
<br>
<br>
<div id="message"></div>
  
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
  
function doubleClick(){
 
document.getElementById("message").innerHTML="双击按钮";
}
</script>

技术分享图片

 

 示例 5 : 

变化事件

<input type="text" id="t1" onchange="change()"  value="" >
  
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
   
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
   
</script>

技术分享图片

 

示例 6 : 

提交事件

可以在form元素上,监听提交事件
当form元素@提交的时候,会触发onsubmit事件
本例使用 提交账号密码 来进行演示

<form action="/study/login.jsp" onsubmit="login()">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>

<script>
  function login(){
      alert("提交表单");
  }
</script>

技术分享图片

 

HTML DOM 05 事件(二)

原文:https://www.cnblogs.com/JasperZhao/p/13375512.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!