常用的鼠標事件和鍵盤事件

常用鼠標事件

一.禁止選中文字和禁止右鍵菜單

 1.禁止鼠標右鍵菜單
contextmenu主要控制應該何時顯示上下文菜單，主要用於程序員取消默認的上下文菜單

2.禁止鼠標選中( selectstart開始選中)

 

 例子：

 二.獲得鼠標在頁面中的坐標

鼠標事件對象

event對象代錶事件的狀態，跟事件相關的一系列信息的集合。現階段我們主要是用鼠標事件對象MouseEvent和鍵盤事件對象KeyboardEvent。

例子： 

 三.跟隨鼠標的天使

案例分析：

1.鼠標不斷的移動，使用鼠標移動事件:  mousemove在頁面中移動，給document注册事件
2.圖片要移動距離，而且不占比特置，我們使用絕對定比特即可
3.核心原理:每次鼠標移動，我們都會獲得最新的鼠標坐標，把這個x和y坐標做為圖片的top和left值就可以移動圖片

常見的鍵盤事件

 注意:
1.如果使用addEventListener不需要加on

2. onkeypress和前面2個的區別是，它不識別功能鍵，比如左右箭頭，shift等。

3.三個事件的執行順序是:keydown -- keypress --- keyup

 四.keyCode判斷用戶按下哪個鍵

注意:

onkeydown和onkeyup 不區分字母大小寫，onkeypress區分字母大小寫。在我們實際開發中，我們更多的使用keydown和keyup，它能識別所有的鍵（包括功能鍵)Keypress不識別功能鍵，但是keyCode屬性能區分大小寫，返回不同的ASCII值

五.模擬京東按鍵輸入內容

1.快遞單號輸入內容時，上面的大號字體盒子(con)顯示(這裏面的文字

2.同時把快遞單號裏面的值( value )獲取過來賦值給con盒子( innerText )做為內容

3.如果快遞單號裏面內容為空，則隱藏大號字體盒了(con)盒子

4.注意:：keydown和keypress在文本框裏面的特點∶他們兩個事件觸發的時候，文字還沒有落入文本框中

5.keyup事件觸發的時候，文字已經落入文本框裏面了

6.當我們失去焦點，就隱藏這個con盒子

7.當我們獲得焦點，並且文本框內容不為空，就顯示這個con盒子