HTML DOM 05 事件(二)

示例 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>