2024年JavaScript事件高级（下）_header-contextmenu冒泡(4)，2024年最新深入理解Nginx

最新推荐文章于 2024-06-04 19:33:12 发布

2401_84166306

最新推荐文章于 2024-06-04 19:33:12 发布

阅读量655

点赞数 11

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84166306/article/details/138797568

版权

程序员专栏收录该内容

184 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。程序中也有如此场

 <ul>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 </ul>

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。

事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。

三、常用的鼠标事件

3.1 常用的鼠标事件

在这里插入图片描述
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

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

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

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

3.2 鼠标事件对象

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

在这里插入图片描述

四、常用的键盘事件

首先我们要知道键盘事件是什么，
键盘事件就是在我们按下某个键盘按键时电脑会触发其对应的的事件。

4.1 常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。
在这里插入图片描述
注意：

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

4.2 键盘事件对象

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

4.3 键盘事件属性

键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在水保事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。

在这里插入图片描述
ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中，表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。

document.onclick = function (e) {
    var e = e || window.event;  //标准化事件对象
    var t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
    if (e.ctrlKey && e.shiftKey) {  //如果同时按下Ctrl和Shift键
        t.parentNode.removeChild(t);  //移出当前元素
    }
}

在这里插入图片描述

4.4 ASCII 表

在这里插入图片描述

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

需要这份系统化资料的朋友，可以戳这里获取

2401_84166306

关注

11
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
2024年JavaScript事件高级（下）_header-contextmenu冒泡(4)，2024年最新深入理解Nginx

提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
复制链接

扫一扫