关于浏览器里事件的捕获和冒泡及监听器执行的顺序

本文并不是一篇实用的文字，不考虑兼容性，而在于机制的理解。
关于本文的题目，不叫“js事件的捕获和冒泡”，是因为码者并不清楚这种叫法准不准确，于是用一个不那么精确的“浏览器”一词。
测试环境：Firefox Quantum 61.0.2 (64 位)

发现问题（场景）

下面n段代码的输出？

（代码一）基本的嵌套

<div onclick="outer()">
	<div onclick="middle()">
		<div onclick="inner()">gogo</div>
	</div>
</div>
<script>
function outer(){
    
	console.log('outer');
}
function middle(){
    
	console.log('middle');
}
function inner(){
    
	console.log('inner');
}
</script>

结果：

inner
middle
outer

思考：看起来，内层dom的事件监听函数先执行（不过，过早的下结论是很不明智的）。也就是当父子标签都有事件注册的时候，点击子组件 => 父子标签的监听器都会执行（当然，点击父组件的其他区域，子组件的监听器不会执行）。但是，像css一样，子标签自己的东西（比如font-size），优先级高一点。

（代码二）换一种事件注册方式： addEventListener()

<div id="outer">
	<div id="middle">
		<div id="inner">gogo</div>
	</div>
</div>
<script>
// 获取dom
function get(id){
    
	return document.getElementById(id);
}
get('outer').addEventListener('click'