dom事件流（事件冒泡+事件捕获）
2022-03-22 本文已影响0人
我没事_就是有点难受
来源
在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法，并且大多数新浏览器都遵循这两种事件流方式。
w3c标准dom事件流图解
w3c标准dom事件流
DOM事件流
将事件分为三个阶段：捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。
捕获阶段的函数:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件捕获</title>
</head>
<body>
<div id="e">
<input id="btn" type="button" value="按钮">
</div>
<script type="text/javascript">
var e = document.getElementById('e');
var btn = document.getElementById('btn');
e.addEventListener('click',function(){
alert('你点击了div');
},true);
btn.addEventListener('click',function(){
alert('你点击了button');
},true);
</script>
</body>
</html>
冒泡阶段的函数:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<div id="e">
<input id="btn" type="button" value="按钮">
</div>
<script type="text/javascript">
var e = document.getElementById('e');
var btn = document.getElementById('btn');
e.onclick = function (){
alert("你点击了div");
};
btn.onclick = function(){
alert("你点击了button");
}
</script>
</body>
</html>
区别
捕获是由Natscape公司提出的，一般是addEventListener('click', () => {})事件
冒泡是微软提出的，一般直接是dom.onclick = () => {};
