HTML DOM 05 事件(三)
阿新 • • 發佈：2020-07-26
示例7:
載入事件
當整個文件載入成功，或者一個圖片載入成功，會觸發載入事件
當body元素或者img@載入的時候，會觸發onload事件
<script> function loadBody(){ document.getElementById("message1").innerHTML="文件載入成功"; } function loadImg(){ document.getElementById("message2").innerHTML="圖片載入成功"; } </script> <body onload="loadBody()"><div id="message1"></div> <div id="message2"></div> </body> <img onload="loadImg()" src="https://how2j.cn/example.gif"/>
示例8:
當前元件
this表示觸發事件的元件，可以在呼叫函式的時候，作為引數傳進去
<input type="button" onclick="singleClick(this)" value="演示this的按鈕1" > <input type="button"onclick="singleClick(this)" value="演示this的按鈕2" > <br> <br> <div id="message"></div> <script> function singleClick(button){ var s = "被點選的按鈕上的文字是: "+button.value; document.getElementById("message").innerHTML=s; } </script>
示例9:
阻止事件的發生
比如在提交一個表單的時候，如果使用者名稱為空，彈出提示，並阻止原本的提交
2. 在函式中，如果發現使用者名稱為空，則返回false
3. 當onSubmit得到的返回值是false的時候，表單的提交功能就被取消了
<form method="post" action="/study/login.jsp" onsubmit="return login()"> 賬號：<input id="name" type="text" name="name"> <br/> 密碼：<input type="password" name="password" > <br/> <input type="submit" value="登入"> </form> <script> function login(){ var name = document.getElementById("name"); if(name.value.length==0){ alert("使用者名稱不能為空"); return false; } return true; } </script>