常用的鼠标事件和键盘事件

常用鼠标事件

一.禁止选中文字和禁止右键菜单

 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盒子