整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
我們先從瀏覽器按鍵時(shí)間說起，
用JavaScript實(shí)現(xiàn)鍵盤記錄，要關(guān)注瀏覽器的三種按鍵事件類型，
它們分別對(duì)應(yīng)onkeydown、 onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時(shí)候的keyup。
KeyDown：在控件有焦點(diǎn)的情況下按下鍵時(shí)發(fā)生。
KeyPress：在控件有焦點(diǎn)的情況下按下鍵時(shí)發(fā)生。
KeyUp：在控件有焦點(diǎn)的情況下釋放鍵時(shí)發(fā)生。
在這3種事件類型中，keydown和keyup比較底層，而keypress比較高級(jí)。這里所謂的高級(jí)是指，當(dāng)用戶按下shift + 1時(shí)，keypress是對(duì)這個(gè)按鍵事件進(jìn)行解析后返回一個(gè)可打印的“!”字符，而keydown和keyup只是記錄了shift + 1這個(gè)事件。
但是keypress只能針對(duì)一些可以打印出來的字符有效，而對(duì)于功能按鍵，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭頭方向等，就不會(huì)產(chǎn)生keypress事件，但是可以產(chǎn)生keydown和keyup事件。然而在FireFox中，功能按鍵是可以產(chǎn)生keypress事件的。
傳遞給keydown、keypress和keyup事件句柄的事件對(duì)象有一些通用的屬性。如果Alt、Ctrl或Shift和一個(gè)按鍵一起按下，這通過事件的altKey、ctrlKey和shiftKey屬性表示，這些屬性在FireFox和IE中是通用的。
注意:
KeyDown觸發(fā)后，不一定觸發(fā)KeyUp，當(dāng)KeyDown 按下后，拖動(dòng)鼠標(biāo)，那么將不會(huì)觸發(fā)KeyUp事件。
KeyPress主要用來捕獲數(shù)字(注意：包括Shift+數(shù)字的符號(hào))、字母（注意：包括大小寫）、小鍵盤等 除了 F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵 外的ANSI字符
KeyPress 只能捕獲單個(gè)字符,可以捕獲單個(gè)字符的大小寫,不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
KeyDown 和KeyUp 通常可以捕獲鍵盤除了PrScrn（截屏）所有按鍵
KeyDown 和KeyUp 可以捕獲組合鍵,對(duì)于單個(gè)字符捕獲的KeyValue 都是一個(gè)值，也就是不能判斷單個(gè)字符的大小寫,區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
keydown、keypress 按著不動(dòng)會(huì)持續(xù)執(zhí)行事件，keyup執(zhí)行一次
在使用鍵盤的時(shí)候，通常會(huì)使用到CTRL+SHIFT+ALT 類似的組合鍵功能,通過KeyUp 事件能夠來處理（這里說明一下為什么不用KeyDown，因?yàn)樵谂卸↘eyDown的時(shí)候，CTRL、SHIFT和ALT 屬于一直按下狀態(tài)，然后再加另外一個(gè)鍵是不能準(zhǔn)確捕獲組合鍵，所以使用KeyDown 是不能準(zhǔn)確判斷出的，要通過KeyUp 事件來判定 ）
前端架構(gòu)暴力拆解，源碼解析，多年經(jīng)驗(yàn)分享，請(qǐng)持續(xù)關(guān)注！
keydown 事件 會(huì)在按鍵在元素上按下時(shí)觸發(fā)
keyup 事件 會(huì)在按鍵在元素上松開時(shí)觸發(fā)
鍵盤事件只能綁定給可以獲取焦點(diǎn)的元素
事件對(duì)象中key屬性，表示當(dāng)前所按的按鍵
keyCode返回的是按鍵的編號(hào)（不區(qū)分大小寫和換擋）
類似于ctrl alt shift這種功能按鍵，在事件對(duì)象中都有專門判斷屬性
ctrlKey 用來判斷ctrl是否被按下，按下返回true，否則返回false
altKey 用來判斷alt是否按下
shiftKey 用來判斷shift是否按下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: #ff0;
}
</style>
<script>
window.onload = function () {
var inp = document.querySelector('[type=text]');
/*
keydown 事件 會(huì)在按鍵在元素上按下時(shí)觸發(fā)
*/
// inp.addEventListener('keydown',function () {
// console.log('按鍵按下了~~');
// });
/*
keyup 事件 會(huì)在按鍵在元素上松開時(shí)觸發(fā)
*/
// inp.addEventListener('keyup',function () {
// console.log('按鍵松開了~~');
// });
/*
鍵盤事件只能綁定給可以獲取焦點(diǎn)的元素
*/
// document.getElementById('box1').addEventListener('keydown',function () {
// console.log('哈哈哈~~~');
// });
// document.querySelector('a').addEventListener('keydown',function () {
// console.log('按鍵按下了~~');
// });
document.addEventListener('keydown',function (ev) {
/*
事件對(duì)象中key屬性，表示當(dāng)前所按的按鍵
keyCode返回的是按鍵的編號(hào)（不區(qū)分大小寫和換擋）
*/
// if(ev.key.toLowerCase() === 'k'){
// alert('你按了k了！');
// }
/*
判斷用戶的ctrl和k是否同時(shí)被按下
*/
// if(ev.key === 'Control' && ev.key.toLowerCase() === 'k') {
// alert('你的ctrl和k被同時(shí)按下了~~~');
// }
/*
類似于ctrl alt shift這種功能按鍵，在事件對(duì)象中都有專門判斷屬性
ctrlKey 用來判斷ctrl是否被按下，按下返回true，否則返回false
altKey 用來判斷alt是否按下
shiftKey 用來判斷shift是否按下
*/
// if(ev.ctrlKey && ev.key.toLowerCase() === 'k') {
// alert('你的ctrl和k被同時(shí)按下了~~~');
// }
alert(ev.key);
});
};
</script>
</head>
<body>
<input type="text">
<a href="javascript：;">超鏈接</a>
<!--<div id="box1"></div>-->
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
}
</style>
<script>
/*
通過鍵盤來控制div的移動(dòng)
*/
window.onload = function () {
// 獲取box1
var box1 = document.getElementById('box1');
// 為document綁定一個(gè)keydown事件
document.addEventListener('keydown',function (ev) {
// 判斷按鍵的方向
dir = ev.key;
});
document.addEventListener('keyup',function (ev) {
// 判斷按下的鍵和松開的鍵是不是同一個(gè)
if(dir === ev.key){
// 按鍵松開，重置dir
dir = '';
}
});
// 創(chuàng)建一個(gè)變量，用來記錄運(yùn)動(dòng)的方向
var dir = '';
// 創(chuàng)建一個(gè)定時(shí)器，來控制元素的移動(dòng)
setInterval(function () {
switch (dir) {
case 'ArrowUp':
case 'Up':
//向上移動(dòng)
box1.style.top = box1.offsetTop - 10 + 'px';
break;
case 'ArrowDown':
case 'Down':
// 向下移動(dòng)
box1.style.top = box1.offsetTop + 10 + 'px';
break;
case 'ArrowLeft':
case 'Left':
// 向左移動(dòng)
box1.style.left = box1.offsetLeft - 10 + 'px'
break;
case 'ArrowRight':
case 'Right':
// 向右移動(dòng)
box1.style.left = box1.offsetLeft + 10 + 'px'
break;
}
},30)
};
/* input.addEventListener('keydown', function (ev) {
// 限制在input中只能輸出數(shù)字
// console.log(typeof ev.key);
// ev.key 是數(shù)字就讓你輸入，如果不是就禁止輸入
// 取消keydown的默認(rèn)行為
if(/\D/.test(ev.key)){ //用正則限制
ev.preventDefault();
}
});*/
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>setTimeout() 用來設(shè)置函數(shù)在一定時(shí)間后執(zhí)行
參數(shù)：
第一個(gè) 要執(zhí)行的函數(shù)
第二個(gè) 間隔的時(shí)間（毫秒）
setTimeout(test, 3000);
clearTimeout() 用來關(guān)閉setTimeout()所設(shè)置的定時(shí)器
setInterval()
- 可以用來設(shè)置讓一個(gè)函數(shù)反復(fù)的執(zhí)行
- 參數(shù)：
1.要執(zhí)行的函數(shù)
2.每次執(zhí)行的間隔時(shí)間
- setInterval() 調(diào)用時(shí)，它會(huì)返回一個(gè)唯一的id作為參數(shù)，
這個(gè)id是定時(shí)器的唯一標(biāo)識(shí)，可以通過標(biāo)識(shí)來關(guān)閉定時(shí)器
clearInterval() 用來關(guān)閉定時(shí)器
clearInterval(timer);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function test() {
console.log('hello');
}
// test();
// 通過定時(shí)器可以設(shè)置函數(shù)在一定時(shí)候才執(zhí)行
// setTimeout() 用來設(shè)置函數(shù)在一定時(shí)間后執(zhí)行
// 參數(shù)：
// 第一個(gè) 要執(zhí)行的函數(shù)
// 第二個(gè) 間隔的時(shí)間（毫秒）
// setTimeout(test, 3000);
//clearTimeout() 用來關(guān)閉setTimeout()所設(shè)置的定時(shí)器
/*
setInterval()
- 可以用來設(shè)置讓一個(gè)函數(shù)反復(fù)的執(zhí)行
- 參數(shù)：
1.要執(zhí)行的函數(shù)
2.每次執(zhí)行的間隔時(shí)間
- setInterval() 調(diào)用時(shí)，它會(huì)返回一個(gè)唯一的id作為參數(shù)，
這個(gè)id是定時(shí)器的唯一標(biāo)識(shí)，可以通過標(biāo)識(shí)來關(guān)閉定時(shí)器
*/
var timer = setInterval(test, 3000);
setTimeout(function () {
clearInterval(timer);
},10000)
// clearInterval() 用來關(guān)閉定時(shí)器
// clearInterval(timer);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// window.addEventListener('keydown',function () {
// alert(123);
// });
window.onload = function () {
var head = document.getElementById('head');
var num = 0;
// 創(chuàng)建一個(gè)定時(shí)器，來定時(shí)修改h1中的文字
setTimeout(function fn() {
num++;
head.innerHTML = num;
setTimeout(fn, 10*num);
},10);
};
</script>
</head>
<body>
<h1 id="head">0</h1>
</body>
</html>requestAnimationFrame 和 setInterval 主要有以下幾點(diǎn)區(qū)別:
1. 執(zhí)行頻率不同:
- requestAnimationFrame 依賴顯示器的刷新頻率,通常為 60Hz,對(duì)于大多數(shù)顯示器每秒執(zhí)行60次。
- setInterval 的執(zhí)行間隔是固定的,并不依賴刷新頻率,間隔時(shí)間可能高于顯示器刷新頻率。
2. 執(zhí)行時(shí)機(jī)不同:
- requestAnimationFrame 在瀏覽器下一次重繪之前執(zhí)行。
- setInterval 在定時(shí)器到期后盡快執(zhí)行,可能導(dǎo)致丟幀。
3. 性能不同:
- requestAnimationFrame 不會(huì)引起多次重繪,性能更好。
- setInterval 可能引起多次重繪,性能較差,特別是間隔時(shí)間過短的情況。
4. 節(jié)流不同:
- requestAnimationFrame 自帶節(jié)流功能,一般不會(huì)引起性能問題。
- setInterval 可能需要手動(dòng)實(shí)現(xiàn)節(jié)流邏輯來避免頻繁觸發(fā)。
requestAnimationFrame是一個(gè)用于設(shè)置動(dòng)畫的API,它可以配合更新 DOM 的操作,保持最優(yōu)的渲染性能。
**功能:**
- 告訴瀏覽器你希望執(zhí)行一個(gè)動(dòng)畫,并請(qǐng)求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。
- 會(huì)把每一幀中的所有DOM操作集中起來,在一次重繪或回流中就完成,并且重繪之前不會(huì)引起任何觸發(fā)重繪的操作。
**js用法:**
function checkElapsedTime() {
var currentTime = new Date();
var elapsedTime = currentTime - startTime;// 如果已經(jīng)過了2小時(shí)（2*60*60*1000毫秒）
if (elapsedTime >= 2 * 60 * 60 * 1000) {
// 彈窗提示
alert("已經(jīng)加載2小時(shí)了！");
} else {
// 未達(dá)到2小時(shí)，繼續(xù)檢查
requestAnimationFrame(checkElapsedTime);
}
}
把需要重復(fù)更新的動(dòng)畫代碼放入函數(shù),然后傳入requestAnimationFrame創(chuàng)建一個(gè)遞歸循環(huán)。
**優(yōu)點(diǎn):**
- 和瀏覽器刷新頻率保持同步,有效避免丟幀問題。
- 多個(gè)動(dòng)畫或DOM操作會(huì)被合并,減少重繪次數(shù),提升性能。
- 自帶節(jié)流功能,防止頻繁觸發(fā)重繪和回流。
所以requestAnimationFrame是構(gòu)建復(fù)雜或高性能動(dòng)畫的好選擇。 （已編輯）
歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識(shí)和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。
學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對(duì)前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識(shí)。
在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁。我將深入講解每個(gè)語言的基礎(chǔ)知識(shí)，并提供一些實(shí)用技巧和最佳實(shí)踐。無論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。
此外，我還會(huì)分享一些關(guān)于前端開發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢(shì)。互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢(shì)，并了解如何應(yīng)對(duì)這些變化。
我深知學(xué)習(xí)前端不易，因此我將盡力以簡(jiǎn)潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。
如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來最新的前端技術(shù)和知識(shí)。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！
#2023年度創(chuàng)作挑戰(zhàn)#
得收藏的HTML DOM事件和鼠標(biāo)鍵盤事件
onabort//圖像的加載被中斷。
onblur//元素失去焦點(diǎn)。
onchange//域的內(nèi)容被改變。
onclick//當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
ondblclick//當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
onerror//在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。
onfocus//元素獲得焦點(diǎn)。
onkeydown//某個(gè)鍵盤按鍵被按下。
onkeypress//某個(gè)鍵盤按鍵被按下并松開。
onkeyup//某個(gè)鍵盤按鍵被松開。
onload//一張頁面或一幅圖像完成加載。
onmousedown//鼠標(biāo)按鈕被按下。
onmousemove//鼠標(biāo)被移動(dòng)。
onmouseout//鼠標(biāo)從某元素移開。
onmouseover//鼠標(biāo)移到某元素之上。
onmouseup//鼠標(biāo)按鍵被松開。
onreset//重置按鈕被點(diǎn)擊。
onresize//窗口或框架被重新調(diào)整大小。
onselect//文本被選中。
onsubmit//確認(rèn)按鈕被點(diǎn)擊。
onunload//用戶退出頁面。
值得收藏的HTML DOM事件和鼠標(biāo)鍵盤事件
altKey//返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。
button//返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
clientX//返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
clientY//返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
ctrlKey//返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。
metaKey//返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。
relatedTarget//返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。
screenX//返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
screenY//返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
shiftKey//返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。
值得收藏的HTML DOM事件和鼠標(biāo)鍵盤事件
以上內(nèi)容為互聯(lián)網(wǎng)收集感謝關(guān)注與收藏
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
