事件冒泡与捕获

事件冒泡和事件捕获的概念分别由微软和网景公司提出，都是为了解决页面上的事件流（事件发生顺序）的问题，标准截然相反。

• 事件冒泡 被触发的target节点，往document方向，依次触发，从里到外的冒出来
• 事件捕获 addEventListener的第三个参数即是useCapture,默认为false.

<ul class="ul-inline">
	<li>inline block 左右会有间隙</li>
	<li>inline block 左右会有间隙</li>
	<li>inline block 左右会有间隙</li>
	<li>inline block 左右会有间隙</li>
	<li>inline block 左右会有间隙</li>
</ul>
const ul = document.querySelector('.ul-inline');
ul.addEventListener('click', function() {
    console.log('我在冒泡ul', this);
}, false);
for (let node of ul.childNodes) {
    node.addEventListener('click', function() {
        console.log('我在冒泡li', this)
    }, false);
}
ul.addEventListener('click', function() {
    console.log('我在捕获ul', this);
}, true);
for (let node of ul.childNodes) {
    node.addEventListener('click', function() {
        console.log('我在捕获li', this)
    }, true);
}

执行结果是 捕获ul - 捕获li - 冒泡li - 冒泡ul 由此可见，先捕获后冒泡。

• 事件代理 利用了事件冒泡机制，根据event.target拿到操作所命中的dom。

	const p = document.querySelector('p');
	p.addEventListener('click', function(e) {
		if (e.target.nodeName.toLowerCase() === 'span') {
			console.log(123, e.target)
		}
	})