最新JavaScript事件高级（下）_header-contextmenu冒泡(2)，高薪程序员必会-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84573079/article/details/138938653

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

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




---


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

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




---


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


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


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


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


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




---


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

知否知否，应该有弹框在手
知否知否，应该有弹框在手
知否知否，应该有弹框在手
知否知否，应该有弹框在手
知否知否，应该有弹框在手


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




---


### 事件委托


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


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


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




---


## 三、常用的鼠标事件


### 3.1 常用的鼠标事件


![在这里插入图片描述](https://img-blog.csdnimg.cn/2ab3ab7bb32f4e0d800e161ecf5fa4e0.png#pic_center)  
 **1.禁止鼠标右键菜单**  
 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

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




---


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

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




---


### 3.2 鼠标事件对象


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/9ac4e69908894c269a00808b4fb0c703.png#pic_center)




---


## 四、常用的键盘事件


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


### 4.1 常用键盘事件


事件除了使用鼠标触发，还可以使用键盘触发。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bd2c9391796d4a12be873f6a843e1196.png#pic_center)  
 注意：


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




---


### 4.2 键盘事件对象


![在这里插入图片描述](https://img-blog.csdnimg.cn/c6c959789ab144e3b1bd8c0059da2ea7.png#pic_center)  
 注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。  
 在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）  
 Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值




---


### 4.3 键盘事件属性



![img](https://img-blog.csdnimg.cn/img_convert/5e4bc98f2a2d95e82aec7a609ecdfd18.png)
![img](https://img-blog.csdnimg.cn/img_convert/66ea5834ea11e96a68258cde1d229f7e.png)
![img](https://img-blog.csdnimg.cn/img_convert/5469ddab4b9578ce3ecfa34ad1d2139e.png)

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

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618545628)**

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

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618545628)**