因为,没有全面的学习javascript,及其事件原理:
全占的课程:4-5 浏览器 Bubble Up 事件模型中
不是很理解它所讲的。网上查找相关知识点。记录中在博客中:
理解了JS的加载
https://www.cnblogs.com/chentianwei/diary/2018/07/12/9300355.html
这篇文章讲了eventflow的知识:借用w3c的模型。
我个人的实践:
代码:
<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