zoukankan      html  css  js  c++  java
  • 关于浏览器的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

  • 相关阅读:
    迷宫 广搜
    steam 字符串hash or map
    Karen与测试 奇迹淫巧+快速幂
    puzzle 期望树形DP
    函数 贪心
    P1032 字串变换 字符串
    等效集合 图论(缩点)
    高斯消元
    loj2537. 「PKUWC2018」Minimax
    loj2538. 「PKUWC2018」Slay the Spire
  • 原文地址:https://www.cnblogs.com/chentianwei/p/9335192.html
Copyright © 2011-2022 走看看