JS中事件回應

不言原創: 2018-04-04 13:39:211361瀏覽

本篇文章中的內容是關於js的時間回應，現在在這裡分享給大家，有需要的朋友也可以參考一線本篇文章的內容

這裡歸類下幾種常用的時間響應，用法都很簡單而且效果很好。

1.按鍵觸發

這種事件回應很常見了，也是一開始就接觸的。舉個簡單的例子：

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="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" onchange="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比較實用。

JS中事件回應

相關文章