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