前言

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

先赞后看养成习惯。

以下是本篇文章正文内容

一、阻止事件冒泡

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

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

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

e.stopPropagation()

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

e.cancelBubble = true;

前言

本文讲解了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。

四、常用的键盘事件

首先我们要知道键盘事件是什么，

键盘事件就是在我们按下某个键盘按键时电脑会触发其对应的的事件。

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提供了大量能使我们快速便捷地处理数据的函数和方法。