摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。
在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解DOM事件的那些属性和方法。
首先在介绍DOM事件之前我们先来认识下DOM的不同级别。针对不同级别的DOM，我们的DOM事件处理方式也是不一样的。
DOM级别与DOM事件DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。如下图所示：
有人可能会问，为什么没有DOM1级事件处理呢？因为1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。
关于DOM级别这里不做详细的介绍，下面主要介绍下不同级别DOM中的不同事件。
1.DOM0级事件在了解DOM0级事件之前，我们有必要先了解下HTML事件处理程序，也是最早的这一种的事件处理方式，代码如下：
以上代码我们通过直接在HTML代码里定义了一个onclick的属性触发showFn方法，这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作DOM来完成事件的绑定。
那么什么是DOM0级处理事件呢？DOM0级事件就是将一个函数赋值给一个事件处理属性，比如：
以上代码我们给button定义了一个id，通过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。
DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数，比如我还想在按钮点击事件上加上另外一个函数。
2.DOM2级事件DOM2级事件在DOM0级事件的基础上弥补了一个处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数。代码如下：
DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、处理函数和是否在捕获时执行事件处理函数。如果我们还需要添加一个鼠标移入的方法，只需要：
btn.addEventListener("mouseover", showFn, false);
这样点击按钮和鼠标移入时都将触发showFn方法。
需要注意的是IE8级以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现：
btn.attachEvent("onclick", showFn); // 绑定事件
btn.detachEvent("onclick", showFn); // 解绑事件
这里我们不需要传入第三个参数，因为IE8级以下版本只支持冒泡型事件。
3.DOM3级事件DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。
DOM事件流上文中讲到了addEventListener的第三个参数为指定事件是否在捕获或冒泡阶段执行，设置为true表示事件在捕获阶段执行，设置为true表示事件在捕获阶段执行，而设置为false表示事件在冒泡阶段执行。那么什么是事件冒泡和事件捕获呢？可以用下图来解释：
1.事件冒泡所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒，比如上图中a标签为事件目标，点击a标签后同时也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。下面是代码示例：
上面的代码运行后我们点击a标签，首先会弹出"我是目标事件"提示，然后又会弹出"事件冒泡至DIV"的提示，这便说明了事件自内而外向上冒泡了。
那么我们如何阻止事件冒泡呢？这里就涉及事件的Event对象中的stopPropagation方法，如下：
child.addEventListener("click", function(e) {
alert("我是目标事件");
e.stopPropagation();
}, false);
加上stopPropagation方法后，我们再次点击a标签就不会触发div上的click事件了。
2.事件捕获和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行。
此时我们点击a标签，首先弹出的是"事件冒泡至DIV"，其次弹出的是"我是目标事件"，正好与事件冒泡相反。
总结本文主要介绍了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。熟练地使用不同级别的DOM事件并且解决相应的浏览器兼容性问题对我们的前端项目开发会很有帮助。在下篇文章中，我将给大家介绍DOM事件中Event对象的属性和方法。文章地址：DOM 事件深入浅出（二）。
本文为劳卜原创文章，首发于微信公众号：前端呼啦圈（Love-FED）
转载请注明来自——微信公众号：前端呼啦圈（Love-FED）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80620.html
摘要：在事件深入浅出一中，我主要给大家讲解了不同级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。方法主要用于阻止事件的进一步传播，比如阻止事件继续向上层冒泡。备注文本参考自权威指南一书及慕课网教程事件揭秘。 在DOM事件深入浅出（一）中，我主要给大家讲解了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要侧重于D...
摘要：中的事件不存在以上问题挂载的每个函数都可以控制在组件中，不会污染全局空间中没有产生直接使用的，而是使用了事件委托方式处理，无论有多少个出现，其实最后都只在树上添加了一个事件处理函数，挂在最顶层的节点上。 深入浅出React（一） 1、create-react-app工具使用 安装create-react-app npm install create-react-app -g 创...
摘要：深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作，诸如等都是事件的名称，那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。 深入理解js Dom事件机制（一）——事件流 事件就是当用户或者浏览器自身执行的某种动作，诸如 click、mouseover等都是事件的名称，那响应个事件的函数就称为事件处理程序（事件处理函数、事件句柄）。 事件处理程序的名字都是以on...
摘要：深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作，诸如等都是事件的名称，那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。 深入理解js Dom事件机制（一）——事件流 事件就是当用户或者浏览器自身执行的某种动作，诸如 click、mouseover等都是事件的名称，那响应个事件的函数就称为事件处理程序（事件处理函数、事件句柄）。 事件处理程序的名字都是以on...
摘要：事件捕获提出的事件流模型称为事件捕获。事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。 首先我们思考一个很有意思的事情：一张纸上画了两个同心圆，当我们把手指放到圆心上时，手指指向的不是一个圆，而是纸上的两个圆，同理之，当我们单击网页上的一个div...
阅读 1196·2021-11-25 09:43
阅读 2043·2021-09-27 13:36
阅读 955·2021-09-04 16:40
阅读 1848·2019-08-30 11:12
阅读 3161·2019-08-29 14:14
阅读 455·2019-08-28 17:56
阅读 1198·2019-08-26 13:50
阅读 1152·2019-08-26 13:29
