前端基础学习之事件阶段和委托代理

事件传播模式

事件冒泡：事件由最具体的元素接收，不断经过上级节点，直到页面元素document。
事件捕获：事件由最外层页面元素接收，不断经过下级节点，直到触发的目标节点。

浏览器默认按照冒泡方式传播。

三个阶段

冒泡阶段： 冒泡传播模式中，由目标节点到document的过程，叫冒泡阶段。
目标阶段： 事件不断传递(或直接触发)，最终在具体元素(目标节点)上触发的时候，叫做目标阶段。
捕获阶段：捕获传播模式中，由document到目标节点的过程，叫捕获阶段。
可打印e.eventPhase判断当前属于什么阶段：1-捕获 2-目标 3-冒泡

事件监听器 addEventListener

addEventListener(eventName,callback,useCapture)
useCapture 指定事件传播模式，表示以哪个顺序接收事件。
false (默认) 冒泡传播
true 捕获传播

DOM示例

/*css*/
.box{margin:10% auto;color:#fff;text-align: center;}
#box1{width:300px;height: 300px;background-color: #2d3436;}
#box2{width:200px;height: 200px;background-color: #636e72;}
#box3{width:100px;height: 100px;background-color: #b2bec3;}

/*html*/
<div id="box1" class="box">box1
    <div id="box2" class="box">box2
        <div id="box3" class="box">box3</div>
    </div>
</div>

/*js*/
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var useCapture = false;
document.addEventListener('click',e=>{
    console.log('document触发click事件。',e.eventPhase)
},useCapture);
box1.addEventListener('click',e=>{
    console.log('box1触发click事件。',e.eventPhase)
},useCapture);
box2.addEventListener('click',e=>{
    console.log('box2触发click事件。',e.eventPhase)
},useCapture);
box3.addEventListener('click',e=>{
    console.log('box3触发click事件。',e.eventPhase)
},useCapture);

当前属于默认冒泡传播模式，点击box3输出：
box3触发click事件。 2
box2触发click事件。 3
box1触发click事件。 3
document触发click事件。 3

修改useCapture=true，变更为捕获传播模式，点击box3输出：
document触发click事件。 1
box1触发click事件。 1
box2触发click事件。 1
box3触发click事件。 2

目标阶段定义：
删除box3的事件监听，点击box3，box2事件打印的阶段不是2，因为box3才是目标节点。
点击box2，box2事件打印的是2，因为box2正是目标节点。

事件委托/事件代理

原理： 事件冒泡机制
事件触发，触发事件的**最具体元素（目标节点）**将作为参数传给回调事件callback。

// 在上面事件回调中打印触发事件的元素，点击box3发现打印的都是box3
document.addEventListener('click',e=>{
    console.log(e.target)
});
box1.addEventListener('click',e=>{
    console.log(e.target)
});
box2.addEventListener('click',e=>{
    console.log(e.target)
});
box3.addEventListener('click',e=>{
    console.log(e.target)
});

于是可以委托父级监听子元素的事件，而不用给每个子元素注册事件

// 上面4个注册可统一为这一个
document.addEventListener('click',e=>{
    console.log(e.target)
    // 可根据e的一些属性或nodeName判断是子元素还是父元素
});

事件委托/代理优点：

1.减少内存占用，减少事件注册。
2.js新增子元素动态绑定事件（无需再次对其绑定）

使用事件委托注意事项：
使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。

阻止事件默认行为

事件默认行为，如a标签click事件会跳转到href地址，submit按钮会提交form表单等。
有时需要阻止事件的默认行为：

// 一个绑定的事件回调函数
function handleClick(event) {
	// code...
	// 阻止默认行为：
	if(event.preventDefault) {
		event.preventDefault(); // 主流浏览器支持
	} else {
		event.returnValue = false; // IE不支持preventDefault
	}
}

一些框架对此进行了兼容封装，如jquery、vue、react等，可以统一使用event.preventDefault实现。

参考：
EventTarget.addEventListener()
JavaScript事件代理（事件委托）