JS中事件回應
Apr 04, 2018 pm 01:39 PM
javascript
事件
回應
本篇文章中的內容是關於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實作OCX控制項的事件回應範例_javascript技巧
整理Javascript事件回應學習筆記_javascript技巧
以上是JS中事件回應的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
