onclick單機事件 ondblick雙擊事件 onfocus成為焦點，onblur失去焦點 onchange選中對象的值發生變化 onload頁面裝載 onmousemove滑鼠移動 onmouseeout 出去 onmousewheel滑動滾輪 onkeydown按鍵盤 ...
1 <script type="text/javascript"> 2 3 function getUserInput() { 4 //獲取用戶輸入的內容 5 var val = document.getElementById("userinput").value 6 //根據用戶輸入的內容播放相應的動畫 7 playAnimate(val); 8 } 9 function playAnimate(str){ 10 if(str=="黑洞"){ 11 alert("播放反轉的動畫") 12 }else if(str=="反轉"){ 13 alert("播放反轉動畫"); 14 } 15 } 16 </script> 17 <body> 18 <input id="userinput" type="text"/> 19 <input type="button" value="百度一下" onclick="getUserInput();"> 20 21 </body>
onclick單機事件
1 //一個事件可以觸發多個函數 2 function test1() { 3 //單擊事件onclick：常用html標簽是button標簽、a標簽、img標簽 4 alert('nihao') 5 } 6 function test2() { 7 alert("世界"); 8 }
9 <button type="button" onclick="test();">點我測試</button> 10 <a href="javascript:void(0);" onclick="test1();test2();">點我測試2</a>
ondblick雙擊事件
1 //一個html元素可以綁定多個事件 2 function testDouble() { 3 //雙擊事件ondblclick：常用html標簽是button標簽、a標簽、img標簽 4 alert("我被雙擊了！") 5 } 6 <input type="button" value="點我測試雙擊" ondblclick="testDouble()"> 7 <button type="button" ondblclick="testDouble();">點我測試雙擊</button>
onfocus成為焦點，onblur失去焦點
function testFocus() { //獲取焦點事件onfocus：常用的HTML標簽有<input type="text"> console.log("萬眾矚目"); } function testOnblur(){ //丟失焦點事件onblur: 常用的html標簽有<input type="text"> console.log("無人問津") } <input type="text" onfocus="testFocus();" onblur="testOnblur()"/>
onchange選中對象的值發生變化
function testOnchange() { //html的value發生變化的事件：常用html標簽有select console.log("用戶重新選擇了城市") } <select onchange="testOnchange()"> <option value="1">廣州</option> <option value="2">上海</option> <option value="3">北京</option> </select> <input type="text" onchange="testOnchange()"/>
onload頁面裝載
function testOnload() { //頁面載入事件：常用的html標簽是body console.log("頁面載入...") } <body onload="testOnload()">
onmousemove滑鼠移動
<style type="text/css"> #myDiv { width: 300px; height: 500px; border: 1px solid grey; background-image: url("timg.jpg"); } </style> <script type="text/javascript"> function fj(eve) { var e = window.event || eve; var x = e.pageX || e.x; var y = e.pageY || e.y; console.log(x + "--" + y); } </script> <div id='myDiv' onmousemove="fj(event);"> </div>
onmouseeout 出去
onmousewheel滑動滾輪
onkeydown按鍵盤
