关于浏览器的eventflow(capture and bubble up)

因为，没有全面的学习javascript，及其事件原理：

全占的课程：4-5 浏览器 Bubble Up 事件模型中

不是很理解它所讲的。网上查找相关知识点。记录中在博客中：

理解了JS的加载

https://www.cnblogs.com/chentianwei/diary/2018/07/12/9300355.html

这篇文章讲了eventflow的知识：借用w3c的模型。

由bubbles 事件流扩展到DOM的发展

我个人的实践：

代码：

<div id="post-list">

<p class=".toggle-flag">

...

<script>

document.addEventListener("turbolinks:load", function() {
　document.getElementById("post-list").addEventListener("click",function(){
　　console.log("hello");
　})
})

document.addEventListener("turbolinks:load", function() {
　document.querySelectorAll(".toggle-flag").forEach(function(anchor){
　　anchor.addEventListener("click", function(){

　　  console.log("world");

　　})
　})
})

点击div边框处，console会出现"hello"；

点击p元素，console会出现：

world
hello

如果内层的addEventListener（）第三个参数是true，代表UPcatpture，则先显示hello。

重点：bubbles event property

如果一个事件是一个bubbling event则返回一个boolean值。

bubbles是一个object event, 也是DOM Event。

案例：https://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_bubbles