【摘录自MDN】对事件冒泡和捕捉的解释
当一个事件触发了一个有父元素的元素(例如我们的<video>
时),现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。
在捕获阶段:
- 浏览器检查元素的最外层祖先(
<html>
)是否在捕获阶段中注册了一个onclick
事件处理程序,如果是,则运行它。 - 然后,它移动到
<html>
中的下一个元素,并执行相同的操作,然后是下一个元素,依此类推,直到到达实际点击的元素。
在冒泡阶段,恰恰相反:
- 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个
onclick
事件处理程序,如果是,则运行它 - 然后它移动到下一个直接的祖先元素,并做同样的事情,然后是下一个,等等,直到它到达
<html>
元素。
在现代浏览器中,默认情况下,所有事件处理程序都在冒泡阶段进行注册。
【摘录自MDN】对事件冒泡和捕捉的解释的更多相关文章
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- 【事件流】浅谈事件冒泡&&事件捕获------【巷子】
首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流. 1.什么是事件流? 解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受 ...
- 事件冒泡(event bubbling)与事件捕捉(event capturing)
事件捕捉: 单击<div>元素就会以下列顺序触发click 事件. Document => Element html => Element body => Element ...
- js事件冒泡和事件捕捉
结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发 ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
- JQuery阻止事件冒泡---阻止后续代码执行
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- 事件冒泡是什么如何用jquery阻止事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
随机推荐
- Java与Web前端发展前景及薪资对比
Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...
- (DFS)HDU_1241 Oil Deposits
HDU_1241 Oil Deposits Problem Description The GeoSurvComp geologic survey company is responsible f ...
- SqlDataReader阅读器关闭时尝试调用 HasRows 无效
SqlDataReader阅读器关闭时尝试调用 HasRows 无效 原创长白山上放羊娃 发布于2018-07-25 00:29:27 阅读数 538 收藏 展开 在SqlHelper中封装好的Sq ...
- python 实现 md文档自动编号
目录 1. 原理 2. 运行方法 3. 效果 4. 代码 1. 原理 正则匹配对相应字符串进行替换 2. 运行方法 python md_convert.py [a.md, b.md,...] # 转换 ...
- 4.万能的Map+模糊查询
万能的Map 当数据或者属性很多的时候,可以选择性的单独改变密码或者用户名等等 UserMapper.java int updateUserByMap(Map<String,Object> ...
- markdown整理
html标签# h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 一级标题:内容=== 二级标题:内容--- 强调文字:>内容 链接:[文字](链接地址) 图 ...
- queue的使用-Hdu 1702
ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- PAT 1010 Radix (二分)
Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...
- 树莓派安装中文输入法Fcitx及Google拼音输入法
本来是想给树莓派安装搜狗输入法的, 搜狗输入法Linux版:https://pinyin.sogou.com/linux/?r=pinyin 但是一直安装不成功,后面发现原来是系统架构不同导致的,搜狗 ...
- 数据分析--excel
excel 的使用 1.excel基础 1.数据类型 数字类型 字符类型 注意: 1.普通文本:默认作对齐,左上方没有小绿点,数字默认又对齐 2.数字存储为文本类型,美容默认为左对齐,左上方有小绿点 ...