JavaScript-事件響應--event方法
阿新 • • 發佈：2020-10-27
1.應用Javascript 實現圖片切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script language="JavaScript" type="text/JavaScript"> functionfunction1() {document.all.MyPic.src = "./images/01-第7天-10.png"} function function2() {document.all.MyPic.src = "./images/id_ref.png"} </script> </head> <body> <center> <p>滑鼠移動到圖片上以及移開，圖片切換</p> <img src="./images/01-第7天-10.png" width="300" height="200" name="MyPic" id="MyPic"></img> <script language="JavaScript" type="text/JavaScript"> document.all.MyPic.onmouseover=function1; document.all.MyPic.onmouseout=function2; </script> </center> </body> </html>
應用JavaScript實現輸入資料驗證
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script language="JavaScript" type="text/JavaScript"> function data_validate() { var msg = "\n系統提示資訊：\n\n"; if (document.all.MyForm.name.value =='') { msg += "使用者名稱不能為空，請重新填寫並確認！\n"; alert(msg); document.all.MyForm.name.focus(); return false;} if (document.all.MyForm.password.value=='') {msg += "密碼不能為空滿清重新填寫並確認！\n"； alert(msg); document.all.MyForm.password.focus(); return false;}} </script> </head> <body> <center> <form {% csrf_token %} action="HTMLPage37.htm" name="MyForm" method="get" onsubmit=return(data_validate())> <span>使用者登入</span><br> <hr> 使用者：<input type="name" size="25"><br> 密碼：<input type="password" name="password" size="25"><br> <input type="submit" value="提交" name="B1"> <input type="reset" value="重置" name="B2"></p> </form> </center> </body> </html>
在該警告框中單擊“確定”按鈕，瀏覽器返回原始頁面，並將“使用者”欄位設定為當前的輸入焦點。若表單的“使用者”欄位非空，則繼續判斷“密碼”欄位。同樣，若表單的“密碼”欄位為空，滑鼠單擊“提交”按鈕後，將彈出“錯誤”警告框。
document.all.MyForm.name.focus()；設定該欄位為當前輸入焦點，並將布林值false作為結果返回給submit事件；
如果個欄位都不為空，則將布林值true作為結果返回給submit事件；
瀏覽器將頁面跳轉到HTMLPage37.如果返回的結果為false，則瀏覽器取消載入目標頁面的動作，而繼續將瀏覽器焦點定位在原始頁面中。