javascript事宜机制搞不清楚

2024年4月8日 137次阅读 来源: 代码碎片

两种，冒泡和捕捉，不对是捕捉和冒泡。

    document.body.addEventListener("click",function(){console.log("1")},true);
    document.body.addEventListener("click",function(){console.log("4")},false);
    document.querySelector("header").addEventListener("click",function(){console.log("2")},true);
    document.querySelector("header").addEventListener("click",function(){console.log("3")},false);

申明：

  1. 先不关注捕捉照样冒泡。事宜激活后是先举行捕捉，然后把函数都举行注册，比方一个元素绑定了多个click事宜。
  2. 然后推断addEventListener的第三个参数，ture示意捕捉，false示意冒泡;
  3. 上面的body,header元素绑定了四个事宜，ture优于false实行(两个都有，捕捉事宜优于冒泡)，捕捉是从body往header(从外到内，关于都是true而言)，冒泡是从header往body(从里到外，关于都是false而言)
  4. 阻挠捕捉或许冒泡，抛开这两个东西，也就是阻挠事宜流传。翻开chrome控制台，实行console.dir(window.Event.prototype),关注内里的四个要领initEvent、preventDefault、stopImmediatePropagation、stopPropagation，第一个初始化事宜要领，第二个阻挠默许行动，第三个百度一下，第四个stop：住手，propagation：流传。
  5. target、currenttarget，剖断当前元素，绑或解或跳过
    原文作者：代码碎片
    原文地址: https://segmentfault.com/a/1190000000691197
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞