帶你了解JavaScript中的鍵盤、滑鼠事件

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於滑鼠事件以及鍵盤事件的相關問題，還包括了頁面事件、焦點事件、表單事件，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

頁面事件

思考：HTML頁面是按照什麼樣的順序載入的？

答案：頁面的載入是按照程式碼的寫順序，從上到下依序執行的。

會出現的問題：若在頁面尚未載入完成的情況下，就使用JavaScript操作DOM元素，會出現語法錯誤。

#解決方法：頁面事件可以改變JavaScript程式碼的執行時機。

• load事件：用於body內所有標籤都載入完成後才觸發，又因其無需考慮頁面載入順序的問題，常常在開發特定功能時添加。
• unload事件：用於頁面關閉時觸發，經常用於清除引用避免記憶體洩漏時使用。

焦點事件

#在網路開發中，焦點事件多用於表單驗證功能，是最常用的事件之一。

例如，文字方塊取得焦點改變文字方塊的樣式，文字方塊失去焦點時驗證文字方塊內輸入的資料等。

為了讓大家更好的掌握焦點事件的使用方法，以下以驗證使用者名稱和密碼是否為空進行示範。

程式碼實作

	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($(&#39;user&#39;)); // 检测id为user的元素失去焦点后，value值是否为空
	addBlur($(&#39;pass&#39;)); // 检测id为pass的元素失去焦点后，value值是否为空
	};
	function $(obj) { // 根据id获取指定元素
	return document.getElementById(obj);
	}
	function addBlur(obj) { // 为指定元素添加失去焦点事件
	obj.onblur = function() {
	isEmpty(this);
	};
	}
	function isEmpty(obj) { // 检测表单是否为空
	if (obj.value === &#39;&#39;) {
	$(&#39;tips&#39;).style.display = &#39;block&#39;;
	$(&#39;tips&#39;).innerHTML = &#39;注意：输入内容不能为空! &#39;;
	} else {
	$(&#39;tips&#39;).style.display = &#39;none&#39;;
	}
	}
	</script>
	
	

以上是帶你了解JavaScript中的鍵盤、滑鼠事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！