DOM事件

个人学习使用

DOM事件模型

DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

DOM执行事件存在三个阶段

静态变量	描述	DOM
CAPTURING-PHASE	当前事件阶段为捕获阶段(1)	1
AT-TARGET	当前事件是目标阶段,在评估目标事件(1)	2
BUBBLING-PHASE	当前的事件为冒泡阶段 (3)	3

一般执行顺序是1>2>3，在非同代元素上，会以该顺序执行，优先执行捕获，再进行冒泡。
用户可以选择是否执行捕获
el.addEventListener(“click”, fn bool);
当不传bool或者为falsy时，fn走冒泡。
当bool为true时，fn走捕获
以下列代码举例，当

<button onclick="fn()">点我</button>
<div id="爷爷">
	<div id="爸爸">
		<div id="儿子">
			text
		</div>
	</div>
</div>
<script>
function fnEr(){
	document.getElementById('儿子').innerHTML="儿子";
}
function fnBa(){
	document.getElementById('爸爸').innerHTML="爸爸";
}
function fnYe(){
	document.getElementById('爷爷').innerHTML="爷爷";
}
</script>

由于没有传入参数，会执行冒泡阶段
结果为 爷爷

<div id="爷爷" onclick=fnYe()>
	<div id="爸爸" onclick=fnBa()>
		<div id="儿子" onclick=fnEr()>
			text
		</div>
	</div>
</div>
<script>
var ez = document.getElementById('儿子');
el.addEventListener("click", fnEr(), true);
var bb = document.getElementById('爸爸');
bb.addEventListener("click", fnBa(), true);
var yy = document.getElementById('爷爷');
yy.addEventListener("click", fnYe(), true);
function fnEr(){
	ez.innerHTML="儿子";
}
function fnBa(){
	bb.innerHTML="爸爸";
}
function fnYe(){
	yy.innerHTML="爷爷";
}
</script>

结果为 儿子
由此我们可以得到DOM事件的执行顺序，可以如图所示

引用 饥人谷

当然也有特例情况：

• 当只有一个div被监听
• fn分别在捕获阶段和冒泡阶段监听click事件
• 用户点击的元素就是开发者监听的
  div.addEventListener(“click”, fn1, false);
  div.addEventListener(“click”, fn2, true);
  在这种情况下，谁在前面谁先执行。

取消冒泡

可以通过el.stopPropagation()来终止冒泡。

div.addEventListener("click", (el)=>{
el.stopPropagation()
});