BOM之JavaScript常用事件
阿新 • • 發佈：2018-06-13
efault .get pwa FN uoj d+ cli 第一個 crm
| 鼠標移動事件 鼠標點擊事件(click/dblclick/mousedown/mouseup) 加載與卸載事件( | 鍵盤事件 提交與重置事件 |
| <script type="text/javascript"> //回調函數 我們沒有顯示的調用它。 function movefunc(event){ //window.status = "hello"; //瀏覽器左下角狀態欄顯示信息 window.status = event.clientX+","+event.clientY; //alert("hello"); } function clear(event){ //與上面相對,括號裏可以不傳參數 window.status = "清空了"; } function over(){ //鼠標遇到div邊界觸發 //alert("I am in"); } </script> <center> <div style="border:solid 2px; width:5cm; height:5cm" onmousemove = "movefunc(event)" onmouseout="clear(event)" onmouseover="over()"> </div> | <script type="text/javascript"> function function1(){ alert("你剛剛雙擊了!"); } function function2(){ alert("你剛剛單擊了!"); } </script> <input type="button" value="雙擊我" ondblclick="function1()"> <input type="button" value="單擊我" onclick="function2()"> |
| <script type="text/javascript"> function changePosition(){ var adv = window.document.getElementById("adv"); adv.style.top=Math.random()*60+"px"; adv.style.left=Math.random()*100+"px"; setTimeout("changePosition()",1000); } function showmsg(){ alert("要關閉了"); } </script> <body onload="changePosition()" onunload="showmsg()"> <div id="adv" style="position:absolute; top:0.5cm; left:1cm"> <a href="http://www.baidu.com" target="_blank"><img src="cartoon.gif" /></a> </div> | <script type="text/javascript"> function cleardefault(){ document.getElementById("name").value=""; } function validate(){ var psd= document.getElementById("psd").value ; if(psd=="") alert("密碼不能為空") } </script> <pre> 用戶名 <input id="name" type="text" value="請在此輸入姓名" onfocus="cleardefault()" onblur="alert('用戶名不能為空')" ><br> 密 碼 <input id="psd" type="password" value="" onblur="validate()"> </pre> |
| <script type="text/javascript"> function handle(event){ if(event.keyCode==13) //keycode 是對應鍵值的ascII碼,確認是13 alert("你點擊了確認鍵，請問是否要提交？") } </script> <form method="post" action=""> <input type="text" value="123" onkeypress="handle(event)" /> </form> | <script type="text/javascript"> function confirm_xxx(){ //當用戶點擊表單裏的提交按鈕時，自動被調用 var confrimvalue= window.confirm("是不是要提交"); if( confrimvalue ) return true; else return false; } function showmsg(){ alert("數據已經復位！") } </script> <form method="post" action="02inner.html" onsubmit="return confirm_xxx(this) onreset="showmsg()" > <input type="submit" value="提交" onclick="alert('hello')"/> //onclick不要也可以，點擊提交會執行function <input type="reset" value="重置" /> </form> |
| <script type="text/javascript"> function changCity(){ //先獲取第一個select的值 var select1= document.getElementById("province") citylist1=['濟南','青島','威海']; citylist2=['長沙','嶽陽','湘潭']; var select2= document.getElementById("city") if(select1.selectedIndex==1){ for(var i=0;i<citylist1.length;i++) select2.innerHTML += "<option value=" +citylist1[i]+ ">"+citylist1[i]+"</option>" }else{ for(var i=0;i<citylist2.length;i++) select2.innerHTML += "<option value=" +citylist2[i]+ ">"+citylist2[i]+"</option>" } } </script> | 籍貫： <select id="province" onchange="changCity()"> <option value="0">請選擇省份</option> <option value="1">山東</option> <option value="2">湖南</option> </select> <select id="city"></select>   |
BOM之JavaScript常用事件