最全JavaScript事件高级（下）_header-contextmenu冒泡(3)，2024最新大数据开发高频精选面试题讲解

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

本文讲解了JavaScript事件高级 下，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。
先赞后看养成习惯。

---

以下是本篇文章正文内容

一、阻止事件冒泡

1.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

• 标准写法：利用事件对象里面的 stopPropagation()方法

 e.stopPropagation()

• 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

 e.cancelBubble = true;

---

1.2 阻止事件冒泡的兼容性解决方案

 if(e && e.stopPropagation){
 e.stopPropagation();
 }else{
 window.event.cancelBubble = true;
 }

---

二、事件委托（代理、委派）

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

一个班有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？

解决方案： 快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。

优势： 快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任。

---

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

 <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。

---

四、常用的键盘事件

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

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

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

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

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

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