JS中事件響應

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

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比較實用。








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章