首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Web前端】嵌套元素的“事件”冒泡?!

事件冒泡是指在嵌套的 HTML 元素中,一个事件从最具体的元素开始,然后向上传播到更高层级的父元素。...例如,如果用户点击一个嵌套的按钮,事件首先会被按钮捕获,然后会冒泡到按钮的父元素,接着是父元素的父元素,直到到达 ​​​​​ 元素或文档的根元素。...这种机制使得一个事件可以被多个元素处理,而不需要为每一个元素单独设置事件监听器。 事件冒泡 让我们先看一个关于事件冒泡的基本示例,在按钮及其父元素上设置点击事件监听器。 HTML 代码 事件委托的好处 减少内存开销:只需一个事件监听器就可以处理多个元素。 更容易管理:更方便的添加或删除监听器,尤其是动态内容。...事件冒泡和捕获是浏览器处理事件的重要机制。实际开发中: 事件冒泡可以让我们轻松处理嵌套元素的事件。 通过调用 ​​stopPropagation()​​ 你可以精确地控制事件流。

7300
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML的元素嵌套规则

    一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:   a、abbr、acronym、b、bdo、big、br、cite、code、dfn、...i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var   二、HTML 标签的嵌套规则...块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:    —— 对   ...有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:   h1、h2、h3、h4、h5、h6、p、dt   4. li 内可以包含 div 标签 —— 这一条其实不必单独列出来的...,但是网上许多人对此有些疑惑,就在这里略加说明:   li 和 div 标 签都是装载内容的容器,地位平等,没有级别之分(例如:h1、h2 这样森严的等级制度^_^),要知道,li 标签连它的父级 ul

    2.6K20

    riot.js教程【五】标签嵌套、命名元素、事件、标签条件

    方法传递的,子标签的参数是通过标签属性传递过去的 注意:嵌套的标签总是在父标签内部声明,定义; 标签内嵌入HTML 我们先定义一个my-tag标签 Hello 的,其实是text变量 这就是在标签内嵌入HTML代码 命名元素 当元素具备ref属性的时候, 这个元素会被链接到this.refs上, 这样你就可以很方便的用JS访问到它 事件被触发前完成的,所以你可以在mount事件中访问到this.refs 事件 DOM事件可以直接和riotjs标签内的方法绑定,示例如下: 事件; 方法的第一个参数就是标准的event对象 e.currentTarget 指代触发事件的DOM元素 e.target 也指代触发事件的DOM...,相当于 style="display: none" if – 当值是true的时候,会把该标签加入到DOM元素中,是false的时候,不会把标签加入到dom元素中

    3.9K80

    Spring中,多个service发生嵌套,事务是怎么样的?

    根据报错信息来看是spring框架中的事务管理报错:事务回滚了,因为它被标记为回滚状态。...报错原因 多层嵌套事务中,如果使用了默认的事务传播方式,当内层事务抛出异常,外层事务捕捉并正常执行完毕时,就会报出rollback-only异常。...spring框架是使用AOP的方式来管理事务,如果一个被事务管理的方法正常执行完毕,方法结束时spring会将方法中的sql进行提交。如果方法执行过程中出现异常,则回滚。...在项目中,一般我们都会使用默认的传播方式,这样无论外层事务和内层事务任何一个出现异常,那么所有的sql都不会执行。在嵌套事务场景中,内层事务的sql和外层事务的sql会在外层事务结束时进行提交或回滚。...注:PROPAGATION_NESTED基于数据库savepoint实现的嵌套事务,外层事务的提交和回滚能够控制嵌内层事务,而内层事务报错时,可以返回原始savepoint,外层事务可以继续提交。

    1K10

    React技巧之组件中返回多个元素

    /blog/react-return-multiple-elements[1] 作者:Borislav Hadzhiev[2] 正文从这开始~ fragment 使用React fragment从组件中返回多个元素...return-multiple-elements.png 该截图显示,我们的相邻div元素已经被添加到DOM中,而没有被包裹在一个额外的DOM节点中。 你也可能会看到更多的fragments 语法。...因为我们没有返回多个元素,而是返回一个包含多个子元素的div元素。 在React组件中,我们必须只返回单个元素。因为从函数中返回多个值是无效语法。...React组件只是函数,所以当我们在同一级别返回多个元素时,我们实际上是在函数的同一级别使用多个return语句。...另一方面,当我们使用fragment或者其他元素来包裹元素时,该函数只返回一个带有多个子元素的单一值,这样便解决了错误。

    1K10

    Spring中,多个service发生嵌套,事务是怎么样的?

    根据报错信息来看是spring框架中的事务管理报错:事务回滚了,因为它被标记为回滚状态。...报错原因 多层嵌套事务中,如果使用了默认的事务传播方式,当内层事务抛出异常,外层事务捕捉并正常执行完毕时,就会报出rollback-only异常。...spring框架是使用AOP的方式来管理事务,如果一个被事务管理的方法正常执行完毕,方法结束时spring会将方法中的sql进行提交。如果方法执行过程中出现异常,则回滚。...在项目中,一般我们都会使用默认的传播方式,这样无论外层事务和内层事务任何一个出现异常,那么所有的sql都不会执行。在嵌套事务场景中,内层事务的sql和外层事务的sql会在外层事务结束时进行提交或回滚。...注:PROPAGATION_NESTED基于数据库savepoint实现的嵌套事务,外层事务的提交和回滚能够控制嵌内层事务,而内层事务报错时,可以返回原始savepoint,外层事务可以继续提交。

    9.8K40

    spark读取多个文件夹(嵌套)下的多个文件

    在正常调用过程中,难免需要对多个文件夹下的多个文件进行读取,然而之前只是明确了spark具备读取多个文件的能力。...针对多个文件夹下的多个文件,以前的做法是先进行文件夹的遍历,然后再进行各个文件夹目录的读取。 今天在做测试的时候,居然发现spark原生就支持这样的能力。 原理也非常简单,就是textFile功能。...编写这样的代码,读取上次输出的多个结果,由于RDD保存结果都是保存为一个文件夹。而多个相关联RDD的结果就是多个文件夹。...          val alldata = sc.textFile("data/Flag/*/part-*")           println(alldata.count())    经过测试,可以实现对多个相关联...RDD保存结果的一次性读取。

    3.2K20

    input元素的oninput事件和onchange事件

    input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1、input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput...) { // 处理事件代码 } 第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用 <input type="text" id="...} 第三种:获取input元素,然后在元素上利用事件监听添加input事件 var inputEle = document.querySelector...2、input元素的oninput事件和onchange事件的区别 oninput事件是在输入框中输入时就会触发 onchange事件是在输入框输入完内容后,输入框失焦后触发 onchange事件兼容性好...,主流浏览器都支持 oninput事件IE9以下不支持,其余主流浏览器都支持,针对IE9以下的可以使用onpropertychange事件来替代 参考文献: [1] oninput 事件 [2] input

    3.5K10

    seaborn可视化数据框中的多个列元素

    seaborn提供了一个快速展示数据库中列元素分布和相互关系的函数,即pairplot函数,该函数会自动选取数据框中值为数字的列元素,通过方阵的形式展现其分布和关系,其中对角线用于展示各个列元素的分布情况...,剩余的空间则展示每两个列元素之间的关系,基本用法如下 >>> df = pd.read_csv("penguins.csv") >>> sns.pairplot(df) >>> plt.show()...函数自动选了数据框中的3列元素进行可视化,对角线上,以直方图的形式展示每列元素的分布,而关于对角线堆成的上,下半角则用于可视化两列之间的关系,默认的可视化形式是散点图,该函数常用的参数有以下几个 ###...# 1. corner 上下三角矩阵区域的元素实际上是重复的,通过corner参数,可以控制只显示图形的一半,避免重复,用法如下 >>> sns.pairplot(df, corner=True) >>...通过pairpplot函数,可以同时展示数据框中的多个数值型列元素的关系,在快速探究一组数据的分布时,非常的好用。

    5.2K31

    从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

    1、bind 解绑事件 语法: // 解绑单个或多个事件 绑定事件的元素.unbind("事件名1 事件名2 ..."); // 解绑所有的事件 绑定事件的元素.unbind(); PS:unbind...2、delegate 解绑事件 语法: // 解绑子元素单个或多个事件 父元素.undelegate("子元素", "事件1 事件2 ..."); // 解绑子元素的所有事件 父元素.undelegate...3、on 解绑事件 语法: // 父元素和子元素的所有事件都会解绑 父元素.off(); // 父元素和子元素的单个或多个事件解绑 父元素.off("事件1 事件2 ..."); // 子元素的所有事件解绑...父元素.off("", "子元素"); // 子元素的单个或多个事件解绑 父元素.off("事件1 事件2...", "子元素"); // 父元素中所有的子元素的所有事件解绑 父元素.off("", "**"); // 父元素中所有的子元素的单个或多个事件解绑 父元素.off("事件1 事件2 ...

    75440

    从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

    1、bind 解绑事件 语法: // 解绑单个或多个事件 绑定事件的元素.unbind("事件名1 事件名2 ..."); // 解绑所有的事件 绑定事件的元素.unbind(); PS:unbind...2、delegate 解绑事件 语法: // 解绑子元素单个或多个事件 父元素.undelegate("子元素", "事件1 事件2 ..."); // 解绑子元素的所有事件 父元素.undelegate...3、on 解绑事件 语法: // 父元素和子元素的所有事件都会解绑 父元素.off(); // 父元素和子元素的单个或多个事件解绑 父元素.off("事件1 事件2 ..."); // 子元素的所有事件解绑...父元素.off("", "子元素"); // 子元素的单个或多个事件解绑 父元素.off("事件1 事件2...", "子元素"); // 父元素中所有的子元素的所有事件解绑 父元素.off("", "**"); // 父元素中所有的子元素的单个或多个事件解绑 父元素.off("事件1 事件2 ...

    67220

    jQuery 查找on事件绑定元素的被绑定元素方法

    jQuery 查找on事件绑定元素的被绑定元素方法 遇到的问题 今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...当然这是正确的. 而我需要找到 $box 也就是 img 的父级. 如果不是插件的话,我当然可以根据它的ID或者CLASS来进行查询.问题是,我是写的插件,也就是说,我并不知道它的这些信息是什么....当然,如果box在DOM中只存在一个的话,那么也没有问题,直接通过box就可以找到了. 问题是 box 也并不是唯一的.所以,我应该怎么知道这个 box 到底是 哪个 有点晕.没关系....解决方法 很多基础的东西不理解,就会出现我这样的问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一的父级被绑定元素了.

    4.5K10

    WPF 多个 StylusPlugIn 的事件触发顺序

    如果在 WPF 使用 StylusPlugIn 同时在同一个界面用多个元素都加上 StylusPlugIn 那么事件触发的顺序将会很乱 我建议是不要让 StylusPlugIn 有重叠,在没有理解 StylusPlugIn...因为可能有小伙伴移动了一个元素就让你的代码的行为和之前写的不一样 如果多个 StylusPlugIn 附加的元素没有重叠,那么所有元素的工作都会符合预期。...对同容器内两个重叠元素,将会同时触发两个元素的 StylusPlugIn 事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发 ?...对同容器内多个重叠元素,将知道最上层和最底层的元素会触发事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发 ?...Down 都被调用,但是不同的是 Stylus 2 是在主线程调用 同容器内多个重叠元素 在上面告诉大家同容器内两个重叠元素将会都触发事件 但是千万不要认为多个重叠的元素都会被触发,其实只有最先加入视觉树的元素和命中到的元素会触发

    87630

    WPF 多个 StylusPlugIn 的事件触发顺序

    如果在 WPF 使用 StylusPlugIn 同时在同一个界面用多个元素都加上 StylusPlugIn 那么事件触发的顺序将会很乱 我建议是不要让 StylusPlugIn 有重叠,在没有理解 StylusPlugIn...因为可能有小伙伴移动了一个元素就让你的代码的行为和之前写的不一样 如果多个 StylusPlugIn 附加的元素没有重叠,那么所有元素的工作都会符合预期。...对同容器内多个重叠元素,将知道最上层和最底层的元素会触发事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发 如果是一个附加 StylusPlugIn 的容器,包含一个附加...StylusPlugIn 的元素,那么只有元素会触发在触摸线程触发事件 代码放在 github 建议下载代码测试 点击查看同容器内两个重叠元素例子 点击查看同容器内多个重叠元素例子 点击查看容器和包含一个元素例子...Down 都被调用,但是不同的是 Stylus 2 是在主线程调用 同容器内多个重叠元素 在上面告诉大家同容器内两个重叠元素将会都触发事件 但是千万不要认为多个重叠的元素都会被触发,其实只有最先加入视觉树的元素和命中到的元素会触发

    76820
    领券