事件捕获与事件冒泡

最新推荐文章于 2019-08-18 02:01:09 发布
最新推荐文章于 2019-08-18 02:01:09 发布
阅读量316 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_33261002/article/details/50935833
版权

事件冒泡和事件捕获最初的产生是由于下面这种情况：

<span style="font-size:18px;"><body>
	<div id="outer">
		<p id="inner">click me~</p>
	</div>
</body></span>


如果“div”和“p”都有一个事件点击函数，那么应该先执行哪一个呢？

如果先执行inner就是事件冒泡，先执行outer就是事件捕获。

而这两种完全不同的思想就是由著名的微软和网景提出来的！

如果事件的发生顺序为：p-> div-> body-> html-> document就是事件冒泡

如果事件的发生顺序为：document-> html-> body-> div-> p就是事件捕获


那如何应用或者说解决这种对立的情况呢？

           别急，还有addEventListener第三个参数

在“DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段，addEventListener方法完美的帮我们解决了是想冒泡还是捕获~~

  element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件，第二个参数是触发事件后要执行的函数。而第三个参数的默认值为false，表示在事件冒泡的阶段调用时间处理函数，如果参数为true，则表示在事件捕获的阶段调用处理函数


Crazier_qi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件冒泡与事件捕获
01-20
事件冒泡原理 从下至上 从最里面元素事件冒泡到最外层父级元素上 大哥 二哥 三弟 var a = document.getElementsByClassName('a')[0] var b = document.getElementsByClassName('b')[0] var c = document....
Javascript事件冒泡、事件捕获及事件相关
u014268482的博客
12-23 147
####javascript中三种事件方式: 1. onXXX方式 该方式为最简单直接使用事件的方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
理解事件捕获和事件冒泡
Hey firefly
04-03 6209
参考资料浅谈事件冒泡与事件捕获 一年前刚开始接触JavaScript的时候就看过有关事件冒泡和事件捕获的文章，但是当时只是看过了就是看过了，没有自己实际的实践，并没有什么自己的理解在里面，属于转眼就忘的那种状态，这段时间由于参加百度的ife前端培训，做到js方面的任务时，决定仔细的学习一下时间捕获和事件冒泡，所以就有了今天这篇文章。 ps：其实前两天就想写了，但无奈图书馆的网一直连不上，只好推到
JavaScript事件捕获与事件冒泡
weixin_42331327的博客
07-05 6235
冒泡机制 气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制 在不同浏览器中，冒泡的程度不同： IE 6.0: div -&gt; body...
事件冒泡和事件捕获
kiku
08-18 765
事件冒泡和事件捕获 事件流是描述从页面中接收事件的顺序【从内到外(冒泡)，从外到内(捕获)】。 事件冒泡： 事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的o...
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
09-03
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的...和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
JS中事件冒泡和事件捕获介绍
11-27
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
JavaScript事件冒泡与事件捕获实例分析
10-18
主要介绍了JavaScript事件冒泡与事件捕获,结合实例形式分析了事件冒泡、阻止冒泡以及事件捕获的相关原理、操作技巧与注意事项,需要的朋友可以参考下
浅谈Json解析与序列化
热门推荐
哎
03-13 1万+
从头说起： 首先的首先，什么是Json：一种数据表示形式，JSON：JavaScript Object Notation对象表示法 Json语法规则： 数据在键值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 像这样： { "firstName":"John" , "lastName":"Doe" } 这样： { "em
浅谈offsetleft与left系列的区别
哎
03-14 8519
在复习javascript运动框架的过程中，又遇到了offset属性，之前一直比较模糊的一个知识点，今天各方查阅资料总算有了一个比较清楚地认识，特来道一道其中真谛！ 首先来一段代码测试测试！ 未定义 div{ width:100px; height:100px; border:5px solid red; background-color:gre
JS深度克隆代码实现
哎
10-05 7251
js深度克隆js对象组成说对象的深度克隆之前，要先明白JS 中对象的组成。 以一句话说js中一切皆对象具体数据类型分为两种： - 原始数据类型 - 引用数据类型 原始数据类型：其中存储的是对象的实际地址。eg. number、string、boolean、还有两个特殊的null、undefined 引用数据类型：其中存储的是对象的引用地址。eg. array、fu
理解JS函数中的参数
哎
06-15 5278
ECMAScript函数的参数与段多事语言中函数的参数有所不同。ECMAScript中的函数无所谓传几个参数和类型，解析器永远不会报错。 例如：function doAdd1(num1,num2){ alert(num1+num2); } doAdd1(10);//NAN doAdd1(30,20);//50解析器照样不会报错，只是如果传递一个参数计算出来的
js如何获取非行间样式
哎
03-14 4785
我们都知道，js不能直接获取样式表中的样式，例如width，left，只能直接获取行内样式，但是现在主流不建议写行内样式，因此我们封装一个可以直接获取非行间样式的函数 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } el
正则表达式分组模式
哎
10-12 3790
正则表达式分组模式 捕获组 在正则表达式中，使用“（）”进行分组，一对圆括号括起来的表达式就是一个分组。 捕获组就是匹配到括号中的内容 var reg = /(\?|&amp;)name=[^&amp;]*(&amp;|$)/; 像这样一个正则表表达式，捕获组中的内容就是括号匹配到的 var _cuttent_url = www.baidu.com?name=4567&amp;b=3456; ...
从实现倒计时谈闭包
哎
04-21 2385
面试中在谈论闭包的时候有让实现一个倒计时功能，当时满脑子都是那个setTimeout压入栈不断输出循环尾数的例子，最后也是没有用闭包实现倒计时 首先来看看那个在循环中不断重复输出的setTimeout代码片： var countDown = function(){ for(var i=10;i>0;i--) { setTimeout(function(){consol
JavaScript垃圾回收机制
哎
03-22 1031
先简述一下JavaScript引擎内存分配的几种情况： 1.object new Object(); new MyConstructor(); {a:4,b:5} Object.create(); 2.数组 new Array(); [1,2,3,4]; 3.字符串 new String("hello hyddd"); ""+e.innerHTML +"" 4.函数对象 var x
Js字符串常用操作总结
哎
02-05 629
String类型String类型是字符串的对象包装类型，可以使用String构造函数来创建var stringObject = new String("hello world");1.字符方法charAt()：以单字符字符串的形式返回给定位置的字符 charCodeAt()： 返回该位置字符的字符编码 是用于访问字符串中特定字符的方法，都接收一个参数，即基于0的字符位置。2.字符串操作方法con
跨域技术JSONP
哎
06-13 443
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是用用JSON的一种新方法，在后来的Web服务中非常流行。JSONP看起来与JSON差不多，只不过是被包含在函数中调用的JSON 如下： callback({"name":"Nicholas"}); JSONP组成 JSONP由两部分组成：回调函数和数据 回调函数 当响应到来时在页面中调用的函
vue 事件冒泡事件捕获
最新发布
08-25
事件捕获与事件冒泡相反，它从根元素开始，逐级向下捕获，直到达到真正触发事件的元素。首先事件会在根元素上触发，然后在根元素的子元素上触发，再在子元素的子元素上触发，依此类推，直到达到触发事件的元素。 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值