DOM事件高级④(常用的鼠标、键盘事件)

DOM事件高级④(常用的鼠标、键盘事件)

文章目录

​​常见的鼠标事件​​

​​鼠标事件​​​​mouseenter 和mouseover的区别​​​​鼠标事件对象​​

​​常用的键盘事件​​

​​键盘事件​​​​键盘事件对象​​

​​附：ASCII码表​​

常见的鼠标事件

鼠标事件

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。

document.addEventListener('contextmenu', function(e) { e.preventDefault();})

2.禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) { e.preventDefault(); })

mouseenter 和mouseover的区别

mouseenter 鼠标事件

当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡。

实验代码

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。

案例：让一个物体随着鼠标的移动而移动

思路：

① 鼠标不断的移动，使用鼠标移动事件： mousemove

② 在页面中移动，给document注册事件

③ 图片要移动距离，而且不占位置，我们使用绝对定位即可

④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片

注意：赋值的时候要加单位px，因为e.clientX属性中数值是没有单位的，而style中的left、top是有单位的。

常用的键盘事件

键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

注意：

如果使用addEventListener 不需要加 ononkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。三个事件的执行顺序是： keydown – keypress — keyup

键盘事件对象

注意：

onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

附：ASCII码表

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。