关于Dom事件的理解

最新推荐文章于 2022-05-29 08:30:00 发布

sinat_41707161

最新推荐文章于 2022-05-29 08:30:00 发布

阅读量316

点赞数

分类专栏：事件流自定义事件文章标签： DOM事件

本文链接：https://blog.csdn.net/sinat_41707161/article/details/79681310

版权

事件流同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

自定义事件

1 篇文章 0 订阅

订阅专栏

一、DOM事件的级别

DOM事件分为三个级别，分别是0级、2级和3级事件。

分别长这样：

0级事件：
Element.onclick = function(){};
2级事件:
Element.addEventListener('click',function(){},false);
3级事件：
Element.addEventListener('keyup',function(){},false)
其中，addEventListener()方法的最后一个参数接收一个布尔值，true表示该事件在捕获阶段触发，false表示在冒泡阶段触发。

二、DOM事件模型

DOM事件模型就是捕获和冒泡机制。

三、DOM事件流

所谓事件流，就是比如当在一个元素上绑定了一个点击事件，当点击该对象时，浏览器在背后做了三件事情。

1.事件捕获，从最顶层的window对象到目标对象一层层的检查，举个例子

<!DOCTYPE html>
<html>
<head>
	<title>DOM事件流</title>
</head>
<body>
	<div id="ev">
		<style type="text/css">
			#ev{
				width: 300px;
				height: 100px;
				background-color: red;
				text-align: center;
				line-height: 100px;
				color: #fff;
			}
		</style>
		目标元素
	</div>
	<script type="text/javascript">
		window.addEventListener('click',function(){
			console.log('window')
		},true);
		document.addEventListener('click',function(){
			console.log('document')
		},true);
		document.documentElement.addEventListener('click',function(){
			console.log('documentElement')
		},true);
		document.body.addEventListener('click',function(){
			console.log('body')
		},true);
		document.getElementById('ev').addEventListener('click',function(){
			console.log('ev')
		},true);
	</script>
</body>
</html>

控制台的输出内容是

//window
//document
//documentElement
//body
//ev

可以看出，事件流的经过是先到window > document >documentElement(html节点) >body >目标元素

如果在捕获是发现某个节点也绑定了相同事件，会先触发。

然后在目标阶段触发绑定响应事件事件。

最后从目标元素按捕获的相反路径冒泡。

四、Event对象的常见应用

1.Event.preventDefault();阻止默认行为

2.Event.stopPropagation();阻止冒泡

3.Event.stopImmediatePropagation();

该方法区别于法2.作用是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行。

假如在某个节点上定义了多个事件，那么方法2会将这些事件都执行完，而不会去冒泡。

方法3是如果在某个事件中设定了stopImmediatePropagation，那么在该事件的后续设置的事件都不会执行。

4.Event.currentTarget

5.Event.target

currentTarget和target属性的区别：

Event.target返回触发事件的元素

Event.currentTarget返回绑定事件的元素

作用是什么：

Event.target常用于事件委托。就是比如当需要给一串li元素用for循环绑定事件时，可以使用事件委托来优化。

举个例子

<body>
	<ul id="ev">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
	</ul>
	<script type="text/javascript">
		var ev = document.getElementById('ev');
		ev.onclick = function(event){
			var target = event.target;
			if (target.nodeName.toLowerCase() === 'li') {
				console.log(target.innerHTML)
			}
		}
	</script>
</body>
</html>

五、自定义事件

自定义事件的话主要利用new Evnet()来构造一个自定义事件，用dispatch()方法来触发该事件。

举个例子：

var myEvent = new Event('my-event');
Element.addEventListener('my-event',function(){
    //do something
},true)
Element.dispatch(myEvent);

但是new Event构造函数只能指定事件名，不能绑定数据。如果需要绑定数据，就要用到CustomEvent()方法。

*CustomEvent()方法

CustomEvent()构造函数语法
var myEvent = new customEvent(EventName,detail,bubble,cancelBubble);
参数详解：
EventName：事件名的字符串
detail：绑定在Event对象上的数据，可以是任意类型。
bubble：事件是否冒泡
cancelBubble：事件是否可取消

但是在IE上并不支持上述两个API。可以参考IE中的写法里面的IE的API。

简单来说IE中自定义事件主要是使用三个方法

document.createEvent()

document.initEvent();

document.dispatch();