常用滑鼠事件：
| 滑鼠事件 | 觸發條件 |
| onclilk | 滑鼠點擊左鍵觸發 |
| onmouseover | 滑鼠經過觸發 |
| onmouseout | 滑鼠離開觸發 |
| onfocus | 獲取滑鼠焦點觸發 |
| onblur | 失去滑鼠焦點觸發 |
| onmousemove | 滑鼠移動觸發 |
| onmouseup | 滑鼠彈起觸發 |
| onmousedowm | 滑鼠按下觸發 |
滑鼠事件物件：
| 滑鼠事件物件 | 說明 |
| e.clientX | 回傳滑鼠相當于瀏覽器視窗可視區的x坐標 |
| e.clientY | 回傳滑鼠相當于瀏覽器視窗可視區的y坐標 |
| e.pageX | 回傳滑鼠相當于檔案頁面的x坐標 IE9 +支持 |
| e.pageY | 回傳滑鼠相當于檔案頁面的y坐標 IE9 +支持 |
| e.screenX | 回傳滑鼠相當于電腦螢屏的x坐標 |
| e.screenY | 回傳滑鼠相當于電腦螢屏的y坐標 |
// 滑鼠事件物件 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 滑鼠在可視區的x和y坐標
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 滑鼠在頁面檔案的x和y坐標
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 滑鼠在電腦螢屏的x和y坐標
console.log(e.screenX);
console.log(e.screenY);
})
常用鍵盤事件：
| 鍵盤事件 | 觸發條件 |
| onkeyup | 某個鍵盤按鍵被松開時觸發 |
| onkeydown | 某個鍵盤按鍵被按下時觸發 |
| onkeypress | 某個鍵盤按鍵被按下時觸發 但不識別功能鍵，比如ctrl shift 等 |
// 常用的鍵盤事件
//1. keyup 按鍵彈起的時候觸發
document.addEventListener('keyup', function() {
console.log('我彈起了');
})
//3. keypress 按鍵按下的時候觸發 不能識別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按鍵按下的時候觸發 能識別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三個事件的執行順序 keydown -- keypress -- keyup鍵盤事件物件
| 鍵盤事件物件屬性 | 說明 |
| keyCode | 回傳該鍵的ASCII值 |
使用keyCode屬性判斷用戶按下哪個鍵
// 鍵盤事件物件中的keyCode屬性可以得到相應鍵的ASCII碼值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我們可以利用keycode回傳的ASCII碼值來判斷用戶按下了那個鍵
if (e.keyCode === 65) {
alert('您按下的a鍵');
} else {
alert('您沒有按下a鍵')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/316669.html
標籤：其他
上一篇：?2w字大章 38道面試題 讓你徹底學會JavaScript的this指向問題?
下一篇：cgb2108-day11