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