本文小編為大家詳細(xì)介紹“JavaScript中的鍵盤、鼠標(biāo)事件怎么實現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript中的鍵盤、鼠標(biāo)事件怎么實現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

礦區(qū)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,礦區(qū)網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為礦區(qū)上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的礦區(qū)做網(wǎng)站的公司定做！

頁面事件

思考：HTML頁面是按照什么樣的順序進(jìn)行加載的？

答案：頁面的加載是按照代碼的編寫順序，從上到下依次執(zhí)行的。

會出現(xiàn)的問題：若在頁面還未加載完成的情況下，就使用JavaScript操作DOM元素，會出現(xiàn)語法錯誤。

解決辦法：頁面事件可以改變JavaScript代碼的執(zhí)行時機(jī)。

• load事件：用于body內(nèi)所有標(biāo)簽都加載完成后才觸發(fā)，又因其無需考慮頁面加載順序的問題，常常在開發(fā)具體功能時添加。

• unload事件：用于頁面關(guān)閉時觸發(fā)，經(jīng)常用于清除引用避免內(nèi)存泄漏時使用。

焦點事件

在Web開發(fā)中，焦點事件多用于表單驗證功能，是最常用的事件之一。

例如，文本框獲取焦點改變文本框的樣式，文本框失去焦點時驗證文本框內(nèi)輸入的數(shù)據(jù)等。

為了讓大家更好的掌握焦點事件的使用方法，下面以驗證用戶名和密碼是否為空進(jìn)行演示。

代碼實現(xiàn)

	
	
	
	
	
	
	
	

	
	
用戶名：
	
密　碼：
	
登錄
	

	
	
	

鼠標(biāo)事件

鼠標(biāo)事件是Web開發(fā)中最常用的一類事件。

例如，鼠標(biāo)滑過時，切換Tab欄顯示的內(nèi)容；利用鼠標(biāo)拖拽曳狀態(tài)框，調(diào)整它的顯示位置等，這些常見的網(wǎng)頁效果都會用到鼠標(biāo)事件。

在項目開發(fā)中還經(jīng)常涉及一些常用的鼠標(biāo)屬性，用來獲取當(dāng)前鼠標(biāo)的位置信息。

IE6—8瀏覽器中不兼容pageX和pageY屬性。因此，項目開發(fā)時需要對IE6~8瀏覽器進(jìn)行兼容處理。

鼠標(biāo)在文檔中的坐標(biāo)等于鼠標(biāo)在當(dāng)前窗口中的坐標(biāo)加上滾動條卷去的文本長度。

為了讓大家更好的理解鼠標(biāo)事件的使用，以圓形顯示鼠標(biāo)單擊位置為例演示。

代碼實現(xiàn)

【案例】鼠標(biāo)拖曳特效

盒子的位置（left和top值）= 鼠標(biāo)的位置（left和top值）- 鼠標(biāo)按下時與盒子之間的距離（left和top值）。

舉個例子

代碼實現(xiàn)思路：

① 編寫HTML，設(shè)計彈框用于實現(xiàn)拖拽特效。

② 為拖拽條添加mousedown事件及其處理程序。

③ 處理鼠標(biāo)移動事件，實現(xiàn)鼠標(biāo)的拖拽的特效。

④ 處理釋放鼠標(biāo)按鍵的事件，實現(xiàn)鼠標(biāo)按鈕松開后，彈框不再移動。

代碼實現(xiàn)

	
	
	
	
	
	
	
	
	
	
	注冊信息 (可以拖拽)
	【關(guān)閉】
	

	

	

	
	
	

鍵盤事件

鍵盤事件是指用戶在使用鍵盤時觸發(fā)的事件。

例如，用戶按Esc鍵關(guān)閉打開的狀態(tài)欄，按Enter鍵直接完成光標(biāo)的上下切換等。

下面以Enter鍵切換的使用進(jìn)行演示。具體如例所示。

代碼實現(xiàn)

	
	
	
	
	
	
	
用戶姓名：
	
電子郵箱：
	
手機(jī)號碼：
	
個人描述：
	
	
	

注意

keypress事件保存的按鍵值是ASCII碼，

keydown和keyup事件保存的按鍵值是虛擬鍵碼。

具體參考MDN等手冊

表單事件

表單事件指的是對Web表單操作時發(fā)生的事件。

例如，表單提交前對表單的驗證，表單重置時的確認(rèn)操作等。JavaScript提供了相關(guān)的表單事件。

下面以是否提交和重置表單數(shù)據(jù)為例進(jìn)行演示。具體如例所示。

代碼實現(xiàn)

	
	
	
	
	
	
	
	用戶名：
	
	
	
	
	
	

動手實踐

圖片放大特效

分析如何實現(xiàn)圖片放大特效：

① 準(zhǔn)備兩張相同的圖片，小圖和大圖。

② 小圖顯示在商品的展示區(qū)域。

③ 大圖用于鼠標(biāo)在小圖上移動時，按比例的顯示大圖中的對應(yīng)區(qū)域。

代碼實現(xiàn)思路：

① 編寫HTML頁面，展示小圖、隱藏鼠標(biāo)的遮罩及大圖。

② 當(dāng)鼠標(biāo)在小圖上移動時，顯示鼠標(biāo)的遮罩和大圖。

③ 當(dāng)鼠標(biāo)移動時，讓遮罩跟著在小圖中進(jìn)行移動。

④ 限定遮罩在小圖中的可移動范圍。

⑤ 根據(jù)遮罩在小圖中的覆蓋范圍，按比例的顯示大圖。

讀到這里，這篇“JavaScript中的鍵盤、鼠標(biāo)事件怎么實現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。