事件對象（鼠標、鍵盤）

時間 2019-11-11

標籤事件對象鼠標鍵盤简体版

原文原文鏈接

事件對象

在事件觸發後或在事件處理程序中，（函數體）所獲取並操做的對象。瀏覽器

1. 獲取事件對象

語法：事件源.事件類型 = function(e){}函數

形參 e（能夠是任意字母）就是事件對象。執行函數（即事件觸發後）的時候，瀏覽器會把事件對象交給形參e。spa

1 <script>
2         document.onclick = function() {
3             //瀏覽器會默認給事件對象一些屬性
4             console.log(e);
5             //從對象中拿東西。X座標和Y座標
6             console.log(e.clientX,e.clientY);
7         }
8 </script>

2. 鼠標事件對象相關屬性

1）鼠標事件類型：

onclick
onmouseenter
onmouseleave
onmousemove 鼠標移動事件
onmousedown 鼠標按鍵按下事件
onmouseup 鼠標按鈕彈起事件

2）鼠標事件對象相關屬性：（獲取鼠標位置）

 1 <body>
 2     <div></div>
 3     <script>
 4         var div = document.querySelector('div');
 5         div.onclick = function(e) {
 6             console.log('相對於瀏覽器當前可視頁面的位置：', e.clientX, e.clientY);
 7             console.log('相對於瀏覽器整個頁面的位置：', e.pageX, e.pageY);
 8             console.log('相對於當前元素的位置：', e.offsetX, e.offsetY);
 9         };
10     </script>
11 </body>

3. 拖拽案例

 1 <body>
 2     <div></div>
 3     <script>
 4         var login = document.querySelector('.login');
 5         var tip = document.querySelector('.tip');
 6         tip.onmousedown = function(e) {
 7             var x = e.offsetX;
 8             var y = e.offsetY;
 9             document.onmousemove = function (e) {
10                 login.style.left = e.clientX - x + 'px';
11                 login.style.top = e.clientY - y + 'px';
12             }
13         };
14         tip.onmouseup = function() {
15             document.onmousemove = null; //解綁
16         }
17     </script>
18 </body>

4. 鍵盤事件相關屬性

1）鍵盤事件類型

onkeydown 鍵盤按下事件
onkeyup 鍵盤彈起事件

通常給 document 綁定鍵盤事件。code

2）鍵盤事件對象：（區分鍵盤按下了哪一個鍵）

事件對象.keyCode 獲取鍵盤按鍵對應的鍵碼值
事件對象.altKey 表示alt鍵是否按下，返回布爾值。
事件對象.shiftKey 表示shift鍵是否按下，返回布爾值。
事件對象.ctrlKey 表示ctrl鍵是否按下，返回布爾值。（true按下，false沒有按下）

1 <script>
2         document.onkeydown = function(e) {
3             // console.log(e.keyCode); //得到鍵碼值
4             var num = e.keyCode;
5             if(e.ctrlKey && e.keyCode==67) { //ctrlKey默認爲ture
6                 alert('請登錄！');
7             }
8         };
9 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。