首页 > 其他分享 >【转】js事件冒泡

【转】js事件冒泡

时间:2023-10-10 14:56:58浏览次数:42  
标签:触发 冒泡 元素 js 阶段 事件

js事件冒泡详解和使用场景

最新推荐文章于 2023-07-13 11:46:30 发布 于 2022-11-14 16:16:47 发布

什么是事件冒泡?

事件冒泡就是指父元素和子元素有相同的事件,当触发子元素事件时,会向上冒泡,同时也会触发父元素事件
在这里插入图片描述

事件冒泡的三个阶段

1、捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”,捕获阶段不会响应任何事件;
2、目标阶段:在目标节点上触发称为“目标阶段”;
3、冒泡阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”;

事件冒泡的原理

事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层

应用场景

在这里插入图片描述
在这里插入图片描述
函数中的 Target 指的是 事件真正的发送者是e.target(而且是可以变的,根据触发的不同displayObject,白话就是:用户的鼠标点击在那个标签上 e.target 就来自哪里)
在这里插入图片描述
在这里插入图片描述
这样功能就实现了

如何阻止冒泡事件呢?

在这里插入图片描述
我单机其他的元素
在这里插入图片描述
单机阻止冒泡事件事件的元素
在这里插入图片描述
如果我不阻止冒泡事件
在这里插入图片描述
他会冒泡到父级,父级还会触发事件。

</article>

标签:触发,冒泡,元素,js,阶段,事件
From: https://www.cnblogs.com/hxysg/p/17754672.html

相关文章

  • 事件冒泡
    一个问题​如果有下面一段代码:在HTML中,定义了嵌套的3个 <div/>,ID分别为div1、div2、div3。在JavaScript中定义一个点击事件处理函数,打印当前执行事件元素的id。把事件处理函数分别注册到这3个div中。这个时候,如果点击最里边的div3元素,你猜代码的输出结果是......
  • 【转】JS事件捕获和事件冒泡
    DOM事件流(eventflow)存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获(eventcapturing):当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源),浏览器会从根节点=>事件源(由外到内)进行事件传播。事件冒泡(dubbedbubbling):事件源=>根节点(由内到外)......
  • js-cookie库
    https://blog.csdn.net/weixin_49046027/article/details/121123014https://www.cnblogs.com/gopark/p/13743364.html简介js-cookie是一个简单的,轻量级的处理cookies的jsAPI,主要用来处理cookie相关的插件使用1.下载npmi-Djs-cookie2.引入importCookiesfrom'j......
  • MongoDB Node.js Driver and MongoClient All In One
    MongoDBNode.jsDriverandMongoClientAllInOneThenextgenerationNode.jsdriverforMongoDB$npmimongodb#OR$npmi-Smongodb#OR$npminstallmongodb--savehttps://mongodb.github.io/node-mongodb-native/index.htmlhttps://www.mongodb.com......
  • phpStrom配置sass编译和JS压缩混淆
    1JS压缩混淆(YUICompressor)1.1安装java文件(jre-8u201-windows-x64.exe)1.2YUICompressor下载https://github.com/yui/yuicompressor/releases1.3Phpstrom配置:设置-工具-filewatcher配置YUICompressor参数Program参数:D:\MyLocalSoftWare\compressTool\java\bin\jav......
  • 前端、Vue.js和SVG的一些知识
    前端、Vue.js和SVG的一些知识一、前端简介  1、什么是HTML(静态)(超文本标记语言HyperTextMarkupLanguage),HTML是用来描述网页的一种语言。  2、CSS(层叠样式表CascadingStyleSheets),样式定义如何显示HTML元素,语法为:selector{property:value}(选择符{属性:值}) ......
  • js1之基础知识
    1简介1.1计算机语言计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。总的来说,可以分成机器语言,汇编语言和高级语言三大类。实际上计算机最终所执行的都是机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。0=000000001=00......
  • Spring Boot 访问静态资源css/js
    一、前言我们用SpringBoot搭建Web应用时(如搭建一个博客),经常需要在Html中访问一些静态资源,比如:css样式;js脚本;favicon.ico图标等;而在SpringBoot中如果没有做任何配置,是无法直接访问静态资源的,通常会报404错误二、SpringBoot访问静态资源的默认目录Spring......
  • [899] Save a dictionary as a file (JSON)
    InPython,youcansaveadictionaryasafileusingvariousmethods,suchasJSON,Pickle,orCSV.Here,I'llshowyouhowtosaveadictionaryasaJSONfileandthenreadthatJSONfilebackintoadictionary.SavingaDictionaryasaJSONFile:Y......
  • js_使用js读取link外部样式
    <linkrel="stylesheet"href="https://at.alicdn.com/t/c/font_1826665_p96ije5uc2f.css"crossorigin>varlinkStyle=document.getElementsByTagName("link")[0];varsheet=linkStyle.sheet||linkStyle.styleSheet;letreg=......