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 同样不会冒泡。
实验代码
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('mouseenter', function() {
console.log(11);
})
</script>
</body>
鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。
案例：让一个物体随着鼠标的移动而移动
思路：
① 鼠标不断的移动，使用鼠标移动事件： mousemove
② 在页面中移动，给document注册事件
③ 图片要移动距离，而且不占位置，我们使用绝对定位即可
④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
<body>
<div>跟随</div>
<script>
let gensui = document.getElementsByTagName('div')[0];
document.onmousemove = function(e){
gensui.style.left = e.clientX + 'px';
gensui.style.top = e.clientY + 'px';
};
</script>
</body>
注意：赋值的时候要加单位px，因为e.clientX属性中数值是没有单位的，而style中的left、top是有单位的。
常用的键盘事件
键盘事件
事件除了使用鼠标触发，还可以使用键盘触发
注意：
- 如果使用addEventListener 不需要加 on
- onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
- 三个事件的执行顺序是： keydown – keypress — keyup
键盘事件对象
注意：
- onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
- Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
附：ASCII码表
文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/zyb18507175502/article/details/123803685
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）