摘要：目标阶段真正点击的元素的事件发生了两次，因为在上面的代码中，既在捕获阶段绑定了事件，又在冒泡阶段绑定了事件，所以发生了两次。所以很明显用直接绑定的事件发生在了冒泡阶段。
如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。
本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。
特别少的篇幅关注浏览器兼容问题，毕竟原理了解了，兼容性问题可以自己想办法解决了。
在浏览器相对标准化之前，各个浏览器厂商都是自己实现的事件模型，有的用了冒泡，有的用了捕获，W3C为了兼顾之前的标准，将事件发生定义成如下三个阶段：
1、捕获阶段
2、目标阶段
3、冒泡阶段
只是硬生生的说事件机制到底是怎么回事不容易理解，用一个demo为主线说明事件的原理比较容易理解：
HTML
wrapDiv
innerP
textSpan
CSS
JavaScript
demo页面效果图
这个时候，如果点击一下textSpan这个元素，控制台会打印出这样的内容：
当按下鼠标点击后，到底发生了什么的，现在我基于上面的例子来说一下：
capture=>start: 捕获阶段开始 window=>operation: window document=>operation: document documentElement=>operation: documentElement body=>operation: body wrapDiv=>operation: wrapDiv innerP=>operation: innerP target=>start: 捕获阶段结束，目标阶段开始 textSpan=>operation: textSpan textSpan2=>operation: textSpan bubble=>start: 目标阶段结束，冒泡阶段开始 innerP2=>operation: innerP wrapDiv2=>operation: wrapDiv body2=>operation: body documentElement2=>operation: documentElement document2=>operation: document window2=>operation: window bubbleend=>start: 冒泡阶段结束 capture->window->document->documentElement->body->wrapDiv->innerP->target->textSpan->textSpan2->bubble->innerP2->wrapDiv2->body2->documentElement2->document2->window2->bubbleend
从上面所画的事件传播的过程能够看出来，当点击鼠标后，会先发生事件的捕获
捕获阶段：首先window会获捕获到事件，之后document、documentElement、body会捕获到，再之后就是在body中DOM元素一层一层的捕获到事件，有wrapDiv、innerP。
目标阶段：真正点击的元素textSpan的事件发生了两次，因为在上面的JavaScript代码中，textSapn既在捕获阶段绑定了事件，又在冒泡阶段绑定了事件，所以发生了两次。但是这里有一点是需要注意，在目标阶段并不一定先发生在捕获阶段所绑定的事件，而是先绑定的事件发生，一会会解释一下。
冒泡阶段：会和捕获阶段相反的步骤将事件一步一步的冒泡到window
那可能有一个疑问，我们不用addEventListener绑定的事件会发生在哪个阶段呢，我们来一个测试，顺便再演示一下我在上面的目标阶段所说的目标阶段并不一定先发生捕获阶段所绑定的事件是怎么一回事。
我们重新改一下JavaScript代码：
再看控制台的结果：
target和currentTarget图中第一个被圈出来的解释：textSpan是被点击的元素，也就是目标元素，所有在textSpan上绑定的事件都会发生在目标阶段，在绑定捕获代码之前写了绑定的冒泡阶段的代码，所以在目标元素上就不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生。
图中第二个被圈出来的解释：由于wrapDiv不是目标元素，所以它上面绑定的事件会遵守先发生捕获后发生冒泡的规则。所以很明显用onclick直接绑定的事件发生在了冒泡阶段。
上面的代码中写了e.target和e.currentTarget，还没有说是什么，target和currentTarget都是event上面的属性，target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个DOM元素上。
可以结合控制台打印出来的信息理解下，目标阶段也就是 target == currentTarget的时候。我没有打印它们两个因为太长了，所以打印了它们的nodeName，但是由于window没有nodeName这个属性，所以是undefined。
说到事件，一定要说的是如何阻止事件传播。总是有很多帖子说e.stopPropagation()是阻止事件的冒泡的传播，实际上这么说并不是很准确，因为它不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播。
来看一下我们再改一下的JavaScript代码：
我们在事件的捕获阶段阻止了传播，看一下控制台的结果：
实际上我们点击的是textSpan，但是由于在捕获阶段事件就被阻止了传播，所以在textSpan上绑定的事件根本就没有发生，冒泡阶段绑定的事件自然也不会发生，因为阻止事件在捕获阶段传播的特性，e.stopPropagation()很少用到在捕获阶段去阻止事件的传播，大家就以为e.stopPropagation()只能阻止事件在冒泡阶段传播。
e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为，这块的知识比较简单，可以自己去试一下。
与事件相关的兼容性问题这里只是简单提一下兼容性问题，不做过多的展开。对于绑定事件，ie低版本的浏览器是用attachEvent，而高版本ie和标准浏览器用的是addEventListener，attachEvent不能指定绑定事件发生在捕获阶段还是冒泡阶段，它只能将事件绑定到冒泡阶段，但是并不意味这低版本的ie没有事件捕获，它也是先发生事件捕获，再发生事件冒泡，只不过这个过程无法通过程序控制。
其实事件的兼容性问题特别的多，比如获取事件对象的方式、绑定和解除绑定事件的方式、目标元素的获取方式等等，由于古老的浏览器终究会被淘汰，不过多展开了。
欢迎关注【本期节目】，微信公众号ID：benqijiemu。
这里有：互联网思考、软件&工具推荐、前端技术等。
可以在公众号回复我，希望和大家一起交流所有与互联网相关的事情~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85903.html
摘要：取消事件的默认行为。阻止事件的派发包括了捕获和冒泡阻止同一个事件的其他监听函数被调用。 事件模型 DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器 // 方式一 将事件直接通过属性绑定在元素上 / 方式二 获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件 var btn = document.getElementById(btn) btn....
摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门 事件 JavaScript与HTML之间的交互是通过事件实现的...
摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。 其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...
阅读 1398·2021-09-02 09:53
阅读 2666·2021-07-29 13:50
阅读 1713·2019-08-30 11:07
阅读 1570·2019-08-30 11:00
阅读 1449·2019-08-29 14:00
阅读 1843·2019-08-29 12:52
阅读 2559·2019-08-29 11:11
阅读 3414·2019-08-26 12:23
