溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“JavaScript中的鍵盤、鼠標(biāo)事件怎么實(shí)現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript中的鍵盤、鼠標(biāo)事件怎么實(shí)現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。
頁面事件
思考：HTML頁面是按照什么樣的順序進(jìn)行加載的？
答案：頁面的加載是按照代碼的編寫順序，從上到下依次執(zhí)行的。
會(huì)出現(xiàn)的問題：若在頁面還未加載完成的情況下，就使用JavaScript操作DOM元素，會(huì)出現(xiàn)語法錯(cuò)誤。
解決辦法：頁面事件可以改變JavaScript代碼的執(zhí)行時(shí)機(jī)。
load事件：用于body內(nèi)所有標(biāo)簽都加載完成后才觸發(fā)，又因其無需考慮頁面加載順序的問題，常常在開發(fā)具體功能時(shí)添加。
unload事件：用于頁面關(guān)閉時(shí)觸發(fā)，經(jīng)常用于清除引用避免內(nèi)存泄漏時(shí)使用。
焦點(diǎn)事件
在Web開發(fā)中，焦點(diǎn)事件多用于表單驗(yàn)證功能，是最常用的事件之一。
例如，文本框獲取焦點(diǎn)改變文本框的樣式，文本框失去焦點(diǎn)時(shí)驗(yàn)證文本框內(nèi)輸入的數(shù)據(jù)等。
為了讓大家更好的掌握焦點(diǎn)事件的使用方法，下面以驗(yàn)證用戶名和密碼是否為空進(jìn)行演示。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>驗(yàn)證用戶名和密碼是否為空</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>
</head>
<body>
<p id="tips" class="tips"></p>
<p class="box">
<p><label>用戶名：<input id="user" class="ipt" type="text"></label></p>
<p><label>密 碼：<input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">登錄</button></p>
</p>
<script>
window.onload = function() {
addBlur($('user')); // 檢測id為user的元素失去焦點(diǎn)后，value值是否為空
addBlur($('pass')); // 檢測id為pass的元素失去焦點(diǎn)后，value值是否為空
};
function $(obj) { // 根據(jù)id獲取指定元素
return document.getElementById(obj);
}
function addBlur(obj) { // 為指定元素添加失去焦點(diǎn)事件
obj.onblur = function() {
isEmpty(this);
};
}
function isEmpty(obj) { // 檢測表單是否為空
if (obj.value === '') {
$('tips').style.display = 'block';
$('tips').innerHTML = '注意：輸入內(nèi)容不能為空! ';
} else {
$('tips').style.display = 'none';
}
}
</script>
</body>
</html>鼠標(biāo)事件
鼠標(biāo)事件是Web開發(fā)中最常用的一類事件。
例如，鼠標(biāo)滑過時(shí)，切換Tab欄顯示的內(nèi)容；利用鼠標(biāo)拖拽曳狀態(tài)框，調(diào)整它的顯示位置等，這些常見的網(wǎng)頁效果都會(huì)用到鼠標(biāo)事件。
在項(xiàng)目開發(fā)中還經(jīng)常涉及一些常用的鼠標(biāo)屬性，用來獲取當(dāng)前鼠標(biāo)的位置信息。
IE6—8瀏覽器中不兼容pageX和pageY屬性。因此，項(xiàng)目開發(fā)時(shí)需要對IE6~8瀏覽器進(jìn)行兼容處理。
鼠標(biāo)在文檔中的坐標(biāo)等于鼠標(biāo)在當(dāng)前窗口中的坐標(biāo)加上滾動(dòng)條卷去的文本長度。
為了讓大家更好的理解鼠標(biāo)事件的使用，以圓形顯示鼠標(biāo)單擊位置為例演示。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>顯示鼠標(biāo)單擊位置</title>
<style>
.mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
</style>
</head>
<body>
<p id="mouse" class="mouse"></p>
<script>
var mouse = document.getElementById('mouse');
//需求：鼠標(biāo)在頁面上單擊時(shí)，獲取單擊時(shí)的位置，并顯示一個(gè)小圓點(diǎn)
document.onclick = function(event) {
// 獲取事件對象的兼容處理
var event = event || window.event;
// 鼠標(biāo)在頁面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 計(jì)算<p>應(yīng)該顯示的位置
var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// 在鼠標(biāo)單擊的位置顯示<p>
mouse.style.display = 'block';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
</body>
</html>【案例】鼠標(biāo)拖曳特效
盒子的位置（left和top值）= 鼠標(biāo)的位置（left和top值）- 鼠標(biāo)按下時(shí)與盒子之間的距離（left和top值）。
舉個(gè)例子
代碼實(shí)現(xiàn)思路：
① 編寫HTML，設(shè)計(jì)彈框用于實(shí)現(xiàn)拖拽特效。
② 為拖拽條添加mousedown事件及其處理程序。
③ 處理鼠標(biāo)移動(dòng)事件，實(shí)現(xiàn)鼠標(biāo)的拖拽的特效。
④ 處理釋放鼠標(biāo)按鍵的事件，實(shí)現(xiàn)鼠標(biāo)按鈕松開后，彈框不再移動(dòng)。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)拖動(dòng)</title>
<style>
body{margin:0}
.box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
.hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
#box_close{float:right;cursor:pointer}
</style>
</head>
<body>
<p id="box" class="box">
<p id="drop" class="hd">
注冊信息 (可以拖拽)
<span id="box_close">【關(guān)閉】</span>
</p>
<p class="bd"></p>
</p>
<script>
// 獲取被拖動(dòng)的盒子和拖動(dòng)條
var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // 鼠標(biāo)在拖動(dòng)條上 按下 可拖動(dòng)盒子
var event = event || window.event;
// 獲取鼠標(biāo)按下時(shí)的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 計(jì)算鼠標(biāo)按下的位置 距 盒子的位置
var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // 鼠標(biāo)移動(dòng)的時(shí)候 獲取鼠標(biāo)的位置 整個(gè)盒子跟著鼠標(biāo)的位置走
var event = event || window.event;
// 獲取移動(dòng)后鼠標(biāo)的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 計(jì)算并設(shè)置盒子移動(dòng)后的位置
box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {// 釋放鼠標(biāo)按鍵時(shí) 取消盒子的移動(dòng)
document.onmousemove = null;
};
</script>
</body>
</html>鍵盤事件
鍵盤事件是指用戶在使用鍵盤時(shí)觸發(fā)的事件。
例如，用戶按Esc鍵關(guān)閉打開的狀態(tài)欄，按Enter鍵直接完成光標(biāo)的上下切換等。
下面以Enter鍵切換的使用進(jìn)行演示。具體如例所示。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>按Enter鍵切換</title>
</head>
<body>
<p>用戶姓名：<input type="text"></p>
<p>電子郵箱：<input type="text"></p>
<p>手機(jī)號(hào)碼：<input type="text"></p>
<p>個(gè)人描述：<input type="text"></p>
<script>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
inputs[i].onkeydown = function(e) {
// 獲取事件對象的兼容處理
var e = event || window.event;
// 判斷按下的是不是回車，如果是，讓下一個(gè)input獲取焦點(diǎn)
if (e.keyCode === 13) {
// 遍歷所有input框，找到當(dāng)前input的下標(biāo)
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === this) {
// 計(jì)算下一個(gè)input元素的下標(biāo)
var index = i + 1 >= inputs.length ? 0 : i + 1;
break;
}
}
// 如果下一個(gè)input還是文本框，則獲取鍵盤焦點(diǎn)
if (inputs[index].type === 'text') {
inputs[index].focus(); // 觸發(fā)focus事件
}
}
};
}
</script>
</body>
</html>注意
keypress事件保存的按鍵值是ASCII碼，
keydown和keyup事件保存的按鍵值是虛擬鍵碼。
具體參考MDN等手冊
表單事件
表單事件指的是對Web表單操作時(shí)發(fā)生的事件。
例如，表單提交前對表單的驗(yàn)證，表單重置時(shí)的確認(rèn)操作等。JavaScript提供了相關(guān)的表單事件。
下面以是否提交和重置表單數(shù)據(jù)為例進(jìn)行演示。具體如例所示。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>表單事件</title>
</head>
<body>
<form id="register">
<label>用戶名：<input id="user" type="text"></label>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
// 獲取表單和需要驗(yàn)證的元素對象
var regist = document.getElementById('register');
var user = document.getElementById('user');
regist.onsubmit = function(event) { // 為表單添加submit事件
// 獲取事件對象、輸出當(dāng)前事件類型
var event = event || window.event;
console.log(event.type);
// 判斷表單元素內(nèi)容是否為空，若為空，則返回false，否則返回true
return user.value ? true : false;
};
regist.onreset = function (event) { // 為表單添加reset事件
// 獲取事件對象、輸出當(dāng)前事件類型
var event = event || window.event;
console.log(event.type);
// 判斷是否確認(rèn)重置，按“確定”則返回true，按“取消”返回false
return confirm('請確認(rèn)是否要重置信息，重置后表單填寫的內(nèi)容將全部清空');
};
</script>
</body>
</html>動(dòng)手實(shí)踐
圖片放大特效
分析如何實(shí)現(xiàn)圖片放大特效：
① 準(zhǔn)備兩張相同的圖片，小圖和大圖。
② 小圖顯示在商品的展示區(qū)域。
③ 大圖用于鼠標(biāo)在小圖上移動(dòng)時(shí)，按比例的顯示大圖中的對應(yīng)區(qū)域。
代碼實(shí)現(xiàn)思路：
① 編寫HTML頁面，展示小圖、隱藏鼠標(biāo)的遮罩及大圖。
② 當(dāng)鼠標(biāo)在小圖上移動(dòng)時(shí)，顯示鼠標(biāo)的遮罩和大圖。
③ 當(dāng)鼠標(biāo)移動(dòng)時(shí)，讓遮罩跟著在小圖中進(jìn)行移動(dòng)。
④ 限定遮罩在小圖中的可移動(dòng)范圍。
⑤ 根據(jù)遮罩在小圖中的覆蓋范圍，按比例的顯示大圖。
讀到這里，這篇“JavaScript中的鍵盤、鼠標(biāo)事件怎么實(shí)現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼