H5_0012：js事件冒泡和捕获

最新推荐文章于 2022-05-19 13:02:57 发布

weixin_30678821

最新推荐文章于 2022-05-19 13:02:57 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/eliteboy/p/10861473.html

版权

捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中,

document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上,

而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.

DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段

在事件捕获阶段, 事件从最顶级的父元素逐层向内传递,

在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递

转载于:https://www.cnblogs.com/eliteboy/p/10861473.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30678821

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript事件处理模型之冒泡与捕获，绑定与解除（十一）

Miracle1203的博客

05-07

6787

文章目录事件处理模型冒泡捕获触发顺序，先捕获，后冒泡取消冒泡事件阻止默认事件事件对象事件委托事件绑定处理函数的三种方式事件处理程序的内部this指向事件处理模型以下就是事件处理模型例子的代码 <style> .red{ width: 200px; height: 200px; background-color: red; ...

JavaScript WebAPI 系列三注册事件、删除事件的两种方式以及兼容方案；DOM事件流（冒泡阶段和捕获阶段）；事件对象的常见属性和方法；鼠标事件对象

m0_55170432的博客

03-29

234

1.0 三种动态创建元素区别 document.write() element.innerHTML document.createElement() 区别： document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘 innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 createElement() 创建多个元素效率稍低一点点，但是结构更清晰

参与评论您还未登录，请先登录后发表或查看评论

闭包，继承，事件冒泡，事件捕获，H5与Css新特性，本地存储

L990614的博客

01-18

228

1.闭包 1. 什么是闭包？当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包。 function fn(){ var num =0; num =num +1; return num; } console.log(fun()) // 1 console.log(fun()) // 1 console.log(fun()) // 1 function fn(){ var num=0; return func

360 H5 事件冒泡

Shellin_F的博客

09-21

576

da bu chu lai zhong wen wo de shu ru fa chu wen ti le. na jiu fei huo shao shuo!!! 我已经疯魔了。输入法出问题就调整一下啊，我已经疯了，昨天晚上做梦，梦了一晚上了offer通知，面试通知，在梦里把人能高兴死。醒来，哎。。。GGGGGGGGGGG都是假象~~~~我已经疯了，走路在想URL输入后的过程。真的神经的不行

html5冒泡事件,【前端】事件冒泡与事件捕获的先后问题？

weixin_39630440的博客

06-07

234

我看资料上说现代浏览器对于事件冒泡与事件捕获都是支持的。我写了如下代码：var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");var btn = document.getElementById("btn1");div1.addEventListener("click",functi...

鼠标点击时隐藏java代码,js实现点击展开隐藏效果（实例代码）

weixin_42362048的博客

03-11

397

本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例)。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。先看看效果图：代码实例：事件冒泡-提示框button {width: 160px;height: 30px;background-color: #ff0000;color: #fff;border: 1px solid #000;}#prompt{display: no...

理解事件捕获和事件冒泡

Hey firefly

04-03

6364

参考资料浅谈事件冒泡与事件捕获一年前刚开始接触JavaScript的时候就看过有关事件冒泡和事件捕获的文章，但是当时只是看过了就是看过了，没有自己实际的实践，并没有什么自己的理解在里面，属于转眼就忘的那种状态，这段时间由于参加百度的ife前端培训，做到js方面的任务时，决定仔细的学习一下时间捕获和事件冒泡，所以就有了今天这篇文章。 ps：其实前两天就想写了，但无奈图书馆的网一直连不上，只好推到

JavaScript 事件冒泡应用实例分析

12-01

JavaScript事件冒泡是DOM（文档对象模型）中事件处理的核心机制之一，它描述了事件从最深的DOM节点开始触发，然后逐级向上层节点传播的过程。在大型的Web交互项目，尤其是WebGame中，对事件冒泡的精确控制至关重要，...

第十三讲事件和正则（内联模型、脚本模型和DOM2模型 | 鼠标事件、键盘事件、HTML事件| 事件冒泡、事件捕获|IE和W3C兼容事件、阻止默认行为、鼠标滚轮、上下文菜单、手机事件、正则）

Fiki515的博客

05-09

543

一、JS有三种事件模型：内联模型、脚本模型和DOM2模型。 1、内联模型在HTML中把事件处理函数作为属性执行JS代码: <input type="button" value="按钮" onclick="alert('Lee');" /> //注意单双引号在HTML中把事件处理函数作为属性执行JS函数 <input type="button" value="按钮" onclick="box();" /> //执行JS的函数注意：函数不得放到window.on...

个人技能点(郎)

木木木森林

08-24

2239

个人技能点1. 熟悉 h5 和 c3 新特性：语义化标签，flex 布局，动画等H5 新特性：2. 熟悉js作用域、原型、事件轮询机制、闭包等原理；js 作用域闭包事件轮询机制原型3. 熟悉 ES6 语法标准 promise，async/await 异步方案，箭头函数等`Promise`思路：generatorasync/awaitpromise 和 async/await 的区别箭头函数4. 了解 ajax 前后台数据交互原理，熟练使用原生 ajax 及 ajax 类库，如: axios；并掌握 json

事件冒泡、事件捕获、事件委托

简单是书的博客

11-24

1496

什么叫事件冒泡？以onclick事件为例：我要通过给元素绑定点击事件改变某个元素的属性。我在这个元素上点击一下。可是，这个元素节点外面被其它节点元素包裹，自身也包裹着其它节点元素，浏览器并不能判断它要改变那一层节点元素的属性。这时，浏览器会从最里层节点元素开始，查找该节点元素是否具有响应点击事件的代码，如果没有，浏览器会向上一层查找，直到找到能够响应点击事件的代码为止。这个过程称为事

h5阻止冒泡及冒泡顺序理论

zero_person_xianzi的博客

09-19

831

冒泡型事件冒泡型事件像冒泡一样从dom层次结构的最低端往上一层层上升，例如<div onclick="outer()"><div onclick="inter()"></div</div>,会先执行inter()再执行outer() 捕获型事件捕获型事件从dom层次的顶端开始向下延伸，与冒泡型事件相反取消冒泡 function i...

H5-如何阻止事件冒泡和默认事件

Judian6974的博客

10-31

3876

如何阻止事件冒泡和默认事件阻止事件冒泡:function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble = true } return false 阻止默认冒泡:function

前端知识点之事件的冒泡和捕获

PrototypeOne的博客

05-19

1979

事件的冒泡&捕获 事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 <div id="dv1"> <div id="dv2"> <div id="dv3">click</div> </div> </div> 比如上图的代码，三个div标签呈嵌套关系，假使三个元素都注册了相同的事件，那么他们的触发顺序是怎样的呢？故此，为了解决这个事件流问题，微软和网景提出了

JS之事件处理模型——事件冒泡、事件捕获

gxgalaxy

05-23

336

1、事件冒泡 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上） <div class="wrapper"> <div class="content"> <div class="box"> </div> </div&...

H5面试——如何阻止事件冒泡和默认事件

肉嘟嘟的博客

08-15

1494

如何阻止事件冒泡和默认事件捕获和冒泡的演示捕获和冒泡的演示 //阻止冒泡的方法： // 方法一：event.stopPropagation(),该方法只能阻止click事件的冒泡。 var div1 = document.getElementById("div1"); var p1

H5面试题---如何阻止事件冒泡和默认事件

mengjavakaifa的博客

08-21

2426

如何阻止事件冒泡和默认事件阻止事件冒泡: [javascript] view plain copy print? function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() el

对于html中的事件冒泡的问题

lilovfly的专栏

06-29

1190

今天在修改后台的一个模块，中发现一个button在点击时，触发了表单提交，我在onclick中加入了return，这个在提交之前就应该返回了，不该出现这个问题。转念一想，我觉得我应该时事件冒泡了，也就是一个子元素的事件触发了父元素的事件的触发。简单说一下，解决方案吧，对于button，如果在表单中，相当于submit一样的存在，加入type="button"这个，就可以...

移动端h5页面touch事件与点击穿透问题

weixin_30746117的博客

04-29

1664

前言做过移动端H5页面的同学肯定知道，移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的问题。 touch事件的来源 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和clic...

python h5py ImportError: DLL load failed while importing _errors: 找不到指定的程序。