本文介绍了DOM事件的不同级别，包括DOM0级的行内和属性事件处理，DOM2级的addEventListener方法，以及DOM3级新增的事件类型。DOM事件模型包括捕获和冒泡两个阶段。事件流描述了事件在元素之间的传播顺序。此外，还讨论了Event对象的应用，如阻止默认事件、阻止冒泡和设置事件优先级，并提到了自定义事件的创建。
什么是DOM事件类？DOM事件类的级别指什么？DOM事件类模型又是什么？事件流呢？跟随本文一起来了解一下吧！
目录
前言
关于DOM事件，真正了解的有多少呢？DOM事件的级别、DOM事件模型、DOM事件流，以及DOM事件捕获的流程……，跟随小编脚步了解一下，有不足之处还望指正。
一、DOM是什么？
1.基本概念
2.DOM事件处理的级别（DOM标准定义的级别）
DOM事件一共可以分为3个级别：DOM0级事件处理、DOM2级事件处理、DOM3级事件处理
DOM0级事件
①行内事件
<input type="button" id="btn" onclick="alert('DOM0行内事件')">
②element.on事件名=函数
document.getElementById("btn").onclick = function () {
alert('事件');
}DOM0级事件就是将一个函数赋值给一个事件处理属性，缺点在于：一个处理程序无法同时绑定多个处理函数
DOM1级事件问题
为什么没有1级DOM?
DOM级别1到1998年10月1日成为W3C推荐标准。但是1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。2级DOM中除了定义一些DOM相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的2级DOM事件模型。
DOM2级事件
DOM2级事件只有监听方法，包含了添加和移除事件：addEventListener()和removeEventListener()。
①element.addEventListener(事件名,事件处理函数,false/true)
都有三个参数：①事件名；②事件处理程序函数；③ture:表示在捕获阶段调用，false：表示在冒泡阶段调用（默认）；
document.getElementById("btn").addEventListener("click", function(){}, false);DOM3级事件
DOM3级事件是在DOM2级事件的基础上添加很多事件类型。
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。
document.getElementById('btn').addEventListener('keyup', function(){}, false);二、DOM事件模型又是什么？
DOM事件模型分为捕获和冒泡
一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播有两个阶段。
（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
（2）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。
一般的顺序是先捕获，再冒泡，但如果只有一个元素，那么根据代码的执行顺序
需要添加监听事件：element.addEventLiatener('click',function(){},bool)
监听事件第三个参数的布尔值一般默认为false，ture:表示在捕获阶段调用，false：表示在冒泡阶段调用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM事件模型</title>
</head>
<body>
<style>
table{
width: 500px;
height: 300px;
background: red;
text-align: center;
}
</style>
<table>
<thead></thead>
<tbody>
<tr>
<td id="ev">目标元素（target phase）</td>
</tr>
</tbody>
</table>
<script>
var ev = document.getElementById("ev")
//window监听事件
window.addEventListener('click',function(){
console.log("window capture")
},true)
//document监听事件
document.addEventListener('click',function(){
console.log("document capture")
},true)
//<html>监听事件
document.documentElement.addEventListener('click',function(){
console.log("html capture")
},true)
//<body>监听事件
document.body.addEventListener('click',function(){
console.log("body capture")
},true)
//<table>监听事件
document.getElementsByTagName('table')[0].addEventListener('click',function(){
console.log("table captuer")
},true)
//<tbody>监听事件
document.getElementsByTagName('tbody')[0].addEventListener('click',function(){
console.log("tbody capture")
},true)
//<td>监听事件
document.getElementById('ev').addEventListener('click',function(){
console.log("ev capture")
},true)
</script>
</body>
</html>
冒泡事件只需将第三个参数布尔值改为false即可
三、DOM事件流
- 什么是DOM事件流
事件流描述的是从页面中接受时间的顺序，事件发生会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流中有三个阶段：捕获阶段、当前目标阶段、冒泡阶段
- DOM事件流中的三个阶段
①JS代码中只能执行捕获或者冒泡的其中一个阶段。
②onclick和attachEvent()只能得到冒泡阶段。
③addEventListener()第三个参数如果是true，表示在事件捕获阶段调用事件处理程 序；如果是false，表示在事件冒泡阶段调用事件处理程序。
④实际开发中，我们很少使用事件捕获，一般更加关注事件冒泡。
⑤有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
四、Event对象的常见应用
1、阻止默认事件
event.preventDefault();比如，已知<a>标签绑定了click事件，此时，如果给<a>设置了这个方法，就阻止了链接的默认跳转。
2、阻止冒泡
有的时候，业务中不需要事件进行冒泡。比如说，业务这样要求：单击子元素做事件A，单击父元素做事件B，如果不阻止冒泡的话，出现的问题是：单击子元素时，子元素和父元素都会做事件A。这个时候，就要用到阻止冒泡了。
w3c的方法：（火狐、谷歌、IE11）
event.stopPropagation();IE10以下则是：
event.cancelBubble = true;兼容代码如下：
ev.onclick = function (event) {
alert("child");
//阻止冒泡
event = event || window.event;
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}3、设置事件优先级
event.stopImmediatePropagation();
比如说，我用addEventListener给某按钮同时注册了事件A、事件B。此时，如果我单击按钮，就会依次执行事件A和事件B。现在要求：单击按钮时，只执行事件A，不执行事件B。该怎么做呢？这是时候，就可以用到stopImmediatePropagation方法了。做法是：在事件A的响应函数中加入这句话。
要记住 event 有这个方法。
4、属性4、属性5（一般在事件委托中用到）
event.currentTarget //当前所绑定的事件对象。在事件委托中，指的是【父元素】。
event.target //当前被点击的元素。在事件委托中，指的是【子元素】。
上面这两个属性，在事件委托中经常用到。
五、自定义事件
自定义事件的代码如下：
//定义一个自定义事件
var eve = new Event('custom');
//获取DOM节点
var ev = document.getElementById('ev');
//绑定自定义事件
ev.addEventListener('custom',function(){
console.log('custom')
})
//注册自定义事件
ev.dispatchEvent(eve);上面这个事件是定义完了之后，就直接自动触发了。在正常的业务中，这个事件一般是和别的事件结合用的。比如延时器设置按钮的动作：
//定义一个自定义事件
var eve = new Event('custom');
//获取DOM节点
var ev = document.getElementById('ev');
//绑定自定义事件
ev.addEventListener('custom',function(){
console.log('custom')
})
//延时
setTimeOut(function(){
ev.dispatchEvent(eve);
})总结
关于DOM的知识点暂且总结这些，后面有需要再进行详细补充，有不足之处，多多指正，希望可以解决你的燃眉之急，也希望大家可以一起进步！
扫一扫
1084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
