DOM事件机制

最新推荐文章于 2021-09-08 19:41:07 发布

小新我是小白

最新推荐文章于 2021-09-08 19:41:07 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签：自定义事件 DOM机制

本文链接：https://blog.youkuaiyun.com/lxkll/article/details/88202549

JS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了DOM事件的级别，包括DOM0、DOM2和DOM3级事件，重点讨论了DOM事件模型中的事件流，包括捕获和冒泡阶段。还探讨了Event对象的常见应用，如`preventDefault()`、`stopPropagation()`和`stopImmediatePropagation()`等方法，以及`currentTarget`和`target`的区别。最后，文章提到了自定义事件的实现，包括Event和CustomEvent的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。

从以下几个方面介绍DOM事件：

基本概念：DOM事件的级别
DOM事件模型，事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件

1.DOM事件的级别

//DOM0  
element.onclick=function(){}
//DOM2  
element.addEventListener('click',function(){},false)
//DOM3  
element.addEventListener('keyup',function(){},false)

DOM0级是最早的，而且目前所有的浏览器仍支持0级DOM模型。缺点是一个事件的处理程序只能对应一个函数

删除DOM0事件处理程序，只要将对应事件属性置为null即可。

在DOM2级模型中可以为特定对象的事件注册多个事件监听。

DOM2级事件的删除

removeEventListener("click",function(){},false);

DOM3级事件的操作方式和2级事件是一样的。DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。

ui事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件、自定义事件

2.DOM事件模型，事件流

DOM事件模型：捕获和冒泡

DOM事件流：描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。

事件流三个阶段：捕获目标阶段冒泡

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

3.描述DOM事件捕获的具体流程

事件捕获和事件冒泡流程相反，事件捕获是从目标元素开始向上执行。

通过代码感受事件捕获的具体流程：

<body>
	<div id="ev">
		<style>
			#ev{
				width: 300px;
				height: 100px;
				background: red;
				color: #fff;
				text-align: center;
				line-height: 100px;
			}
		</style>
		目标元素
	</div>
	<script type="text/javascript">
		// 
		var ev = document.getElementById('ev');
		// 最后一个参数默认是false 意义是冒泡阶段触发，设为true意义是捕获阶段触发
		// 捕获流程 打印顺序与注册顺序无关
		// 若想改为冒泡 将每个后面的true 替换成false即可
		window.addEventListener('click',function(){
			console.log('window capture');
		},true);

		document.addEventListener('click',function(){
			console.log('document capture');
		},true);

		document.documentElement.addEventListener('click',function(){
			console.log('html capture');
		},true);

		document.body.addEventListener('click',function(){
			console.log('body capture');
		},true);

		ev.addEventListener('click',function(){
			console.log('ev capture');
		},true);

	</script>
</body>

点击目标元素，执行效果如图所示：

4.Event对象的常见应用

1）event.preventDefault()

用于阻止默认事件，如阻止a标签的跳转

dom.addEventListener('click',function(event){
   event.preventDefault() 
},false)

2）event.stopPropagation()

用于阻止冒泡。例如：父元素绑定了事件A、子元素绑定了事件B，若点击子元素时，事件B响应，由于冒泡事件A也会响应，这是我们不愿意看到的，因此需要阻止冒泡。

3）event.stopImmediatePropagation()

用于阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。例如一个按钮绑定了事件A、B。按照优先级方式，假设第一个响应函数A、第二个响应函数B。如果想要在执行A后就不再执行B，在A事件中加上该命令，就会阻止B执行。

4）event.currentTarge

指向事件所绑定的元素

5)event.target

始终指向事件发生时的元素,可返回当前事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

例如,父元素里包含10个子元素，不通过for的形式为每个子元素绑定事件，在父元素上绑定一次事件，此时点击子元素时需要判断是10个子元素中，那个元素被点击，用target可以得到具体是哪个子元素，用currentTarget可以得到绑定事件的父元素。

5.自定义事件

通过代码表示：

var eve = new Event('test'); // 声明自定义事件 eve类似于事件对象
ev.addEventListener('test', function () { // ev是dom节点 在ev上绑定事件test
　　console.log('自定义事件的响应 test...');
});
ev.dispatchEvent(eve); // 触发事件eve

效果如下图所示：