摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。
前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实vanilla.js就是原生js，不过是网上的一个玩笑而已，但是却能说明一个很重要的问题，就是原生js很重要，所以这部分文章是关于前端开发中原生js的一系列问题的，这篇谈一谈DOM事件。
DOM事件级别DOM分四个级别，一级，二级，三级，没有零级但是通常把DOM1规范形成之前的称为DOM0。而由于1级DOM标准中并没有定义事件相关的内容，所以DOM事件级别只包括DOM0级，DOM2级和DOM3级三种。
首先来看不需要操控DOM的事件
这段代码大家肯定都见过，不需要控制DOM，事件处理时间的函数直接写在html属性中。当然实际开发中应该没有人这样写了，理由也很简单，html和js强耦合，无论是编写还是维护都没有任何好处，于是就有了DOM事件处理。
DOM0级事件同样以上面的程序为例，使用DOM0事件处理就是下面的样子
同样很简单，前端开发者一定都不陌生，DOM0事件定义需要两部，先找到DOM节点，然后把处理函数赋值给该节点对象的事件属性。如果想解除事件，那么只要把null赋值给事件属性即可。DOM0级事件无法给一个事件添加多个处理函数，
DOM2级事件上面的程序使用DOM2级事件处理就是这样的
DOM2级事件使用addEventListener，里面有三个参数，第一个参数是事件名，就是事件属性去掉on，第二个参数是事件处理函数，第三个参数是是否在事件捕获阶段执行（关于事件冒泡和事件捕获下面会介绍）。使用DOM2事件可以随意添加多个处理函数，移除DOM2事件要用removeEventListener，传入的三个参数与添加事件完全相同。特别的旧版本IE浏览器（IE8及一下），需要使用attachEvent和detachEvent来添加和移除事件,传入两个参数第一个是事件属性（包含on），第二个是处理函数，不支持事件捕获所以没有第三个参数。
DOM3级事件DOM3级事件就是在DOM2基础上增加了更多的事件类型
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
DOM事件级别的发展使得事件处理更加完整丰富，而下一个问题就是之前提到的事件冒泡和事件捕获。
事件冒泡和事件捕获有以下HTML结构
我是目标内容
现在给最里面的目标内容绑定事件，就会有一个从事件源和目标之间的事件流，此例中，事件流的方向为window -> document -> html -> body -> div -> span -> 目标 -> span -> div -> body -> html -> document -> window ,整个事件流分为两个部分，以事件目标为界限，从window到目标这个过程为事件捕获，从目标回到window的过程叫事件冒泡。如图所示：
事件默认的处理阶段为冒泡阶段，可以把addEventListener第三个参数设置为true来让时间在捕获阶段被处理，不过通常不建议这样做。实际开发中，经常会利用到事件冒泡，也经常需要阻止事件冒泡，这就涉及到事件对象event的相关内置方法和属性了。
event对象事件处理函数会回调一个参数event，代表当前事件对象，event中有很多常用的方法和属性
preventDefault 阻止默认行为，比如当点击submit按钮时候，可以采用此方法阻止表单提交。
stopPropagation 停止事件冒泡，需要防止事件冒泡带来的负面影响的时候就要使用该方法。
stopImmediatePropagation 阻止后续事件，该方法除了阻止事件冒泡外在当前事件被绑定多个处理程序的时候，后续的处理程序也会被阻止。
currentTarget 此属性返回当前事件所绑定的对象。
target 此属性返回当前触发事件的对象，注意target是触发事件的对象，是真正的事件源，同样以上面的HTML为例，给div绑定一个事件，点击带文字的span后，target是span，而currentTarget是div。
事件冒泡和target属性能做很多事情，比如考虑下面的结构
如果想要实现点击每个li标签就能打印出文本内容，我们可以不用给每个li绑定事件，只需要利用事件冒泡即可
var click = document.getElementById("click");
click.addEventListener("click", log, false);
function log(e) {
console.log(e.target.innerText);
}
自定义事件
除了系统内置的事件外，我们还可以自定义事件，由于平时使用的不多可能感觉会很高端，其实自定义事件并不复杂
var myEvent = new Event("myEvent");
document.addEventListener("myEvent", log, false);
function log() {
console.log("hello event");
}
document.dispatchEvent(myEvent);
通过创建Event对象来创建事件，通过dispatchEvent函数派发事件。自定义事件可以绑定到任意DOM元素上，此处选择document只是为了演示方便。
以上就是关于DOM事件的相关内容总结，接下来后面还会有其他技术的相关文章。
欢迎关注https://fx109138.github.io/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92536.html
摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件事件上一篇已经 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...
摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰 目录 冒泡排序 简介 算法实现 选择排序 简介 算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...
摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定标签事件这里的绑定 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...
摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....
阅读 2197·2021-09-29 09:42
阅读 441·2021-09-06 15:02
阅读 2338·2021-09-02 15:40
阅读 1962·2019-08-30 14:23
阅读 1676·2019-08-30 13:48
阅读 1142·2019-08-26 12:01
阅读 861·2019-08-26 11:53
阅读 2015·2019-08-23 18:31
