這裏歸類下幾種常用的時間響應,用法都很簡單而且效果很好。
1.按鍵觸發
這種事件響應很常見了,也是一開始就接觸的。舉個簡單的例子:
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<p>點擊確認查看日期</p>
<button οnclick="myFunction()">確認</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =Date();
}
</script>
</body>
這一類方法的核心就是在button的標籤內加入onclick+函數名去觸發函數實現功能。
2.鼠標觸發或enter觸發。
第一種方法的缺點其實是很明顯的。比如我要對一批數據進行處理,有很多的輸入框,難道我每個框後面都得加個確認鍵嗎?這樣對用戶的輸入時十分不合理的,所以在填寫表單或者多輸入框時用到鼠標或者enter鍵觸發的效果會效率很多。
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<p>請輸入下列表框</p>
<label>表框一</label><input type="text" id="t1" οnchange="myFunction()"/>
<p id="demo1"></p>
<script>
function myFunction() {
var x = document.getElementById("t1").value;
document.getElementById("demo1").innerHTML="表格一的內容是"+x;
}
</script>
</body>
核心是在輸入框用onchange調用函數,填寫完後鼠標點擊任意地方或者按下enter函數就會調用,根據不同的處理出現不同的效果。
3.隨時觸發
這樣的用法還是比較好的,生活中的實例可以去試試看網頁的在線進制轉換,那個就是不需要你按確認鍵也不需要你按enter,你隨時輸它隨時轉換。包括手機上的計算器也是,實時的計算輸入的值。
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<p>請輸入下列表框</p>
<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>
<p id="demo1"></p>
<script>
function myFunction() {
var x = document.getElementById("t1").value;
document.getElementById("demo1").innerHTML="表格一的內容是"+x;
}
</script>
</body>
使用方法的核心是oneKeyUp+方法名。除了這個還有關鍵字onkeypress,oneKeyDown等。個人認爲oneKeyUp比較實用。