JS自學第六彈
阿新 • • 發佈：2018-11-28
JS函式對事件的處理：（廢話不多說直接上程式碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JS DOM 事件</title> </head> <style> #box { height: 200px; width: 200px; background-color: #00ff00; } </style> <!-- onload="function()" --> <body onunload="function2"> <input type="text" onchange="function3()"> <div id=“box” onmouseover="function4(this)" onmouseout="function5(this)" style="height: 200px;width: 200px;background-color: #00ff00;"></div> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">請點選這裡</div> </body> <script> /* onload 事件： 頁面載入時呼叫（可以對cookie進行處理） */ function function1 () { // navigator物件包含有關瀏覽器的資訊（所有瀏覽器都支援） // navigator.cookieEnabled檢測瀏覽器cookie是否啟用 if(navigator.cookieEnabled == true){ alert('cookie已經啟用') }else{ alert('cookie未啟用') } }; /* onunload事件：使用者離開介面是被觸發 */ function function2 () { console.log("我離開了") }; /* onchange事件： 當輸入框改變時進行觸發 */ function function3 () { alert('我變了') }; /* onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函式。 */ function function4 (obj) { obj.innerHTML = "滑鼠移入方框" }; function function5 (obj) { obj.innerHTML = "滑鼠移出方框" }; /* onmousedown事件：滑鼠按下時觸發的事件 */ function mDown(obj){ obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="請釋放滑鼠按鈕" } /* onmouseup 事件：滑鼠擡起時觸發的事件 */ function mUp(obj){ obj.style.backgroundColor="green"; obj.innerHTML="請按下滑鼠按鈕" } </script> </html>