本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了JavaScript中的一些常用事件,包括滑鼠事件、鍵盤事件、頁面事件、焦點事件等等,希望對大家有幫助。
相關推薦:javascript教學
#頁面事件
##思考:HTML頁面是按照什麼樣的順序載入的?
答案:頁面的載入是按照程式碼的寫順序,從上到下依序執行的。會出現的問題:若在頁面尚未載入完成的情況下,就使用JavaScript操作DOM元素,會出現語法錯誤。
#解決方法:頁面事件可以改變JavaScript程式碼的執行時機。
焦點事件#在網路開發中,焦點事件多用於表單驗證功能,是最常用的事件之一。 例如,文字方塊取得焦點改變文字方塊的樣式,文字方塊失去焦點時驗證文字方塊內輸入的資料等。 為了讓大家更好的掌握焦點事件的使用方法,以下以驗證使用者名稱和密碼是否為空進行示範。
程式碼實作
nbsp;html> <meta> <title>验证用户名和密码是否为空</title> <style> body{background:#ddd;} .box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;} .btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;} .ipt{width:260px;padding:4px 2px;} .tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font-size:13px;} </style> <p></p> <p> </p><p><label>用户名:<input></label></p> <p><label>密 码:<input></label></p> <p><button>登录</button></p> <script> window.onload = function() { addBlur($('user')); // 检测id为user的元素失去焦点后,value值是否为空 addBlur($('pass')); // 检测id为pass的元素失去焦点后,value值是否为空 }; function $(obj) { // 根据id获取指定元素 return document.getElementById(obj); } function addBlur(obj) { // 为指定元素添加失去焦点事件 obj.onblur = function() { isEmpty(this); }; } function isEmpty(obj) { // 检测表单是否为空 if (obj.value === '') { $('tips').style.display = 'block'; $('tips').innerHTML = '注意:输入内容不能为空! '; } else { $('tips').style.display = 'none'; } } </script>
以上是一起來分析JavaScript五大事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!