关于浏览器的eventflow(capture and bubble up) 理解了JS的加载

因为，没有全面的学习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。

一个问题？

下面的代码会导致，从post-list开始，然后到toggle-flage, 再bubbles up到post-list

不知道原因：

fun1 = function(event) {
var url = this.getAttribute("data-url");
console.log("world");
Rails.ajax({
url: url,
type: "POST",
dataType: "json",
success: function(data) {
if (data["flag_at"]) {
document.getElementById("post-flag-" + data["id"]).innerHTML = data["flag_at"];
} else {
document.getElementById("post-flag-" + data["id"]).innerHTML = "";
}
}
})
}
//
document.addEventListener("turbolinks:load", function() {
document.getElementById("post-list").addEventListener("click",function(){
console.log("hello")
// console.log(this.firstChild);
// var url = this.firstChild.getAttribute("data-url");
})
})

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