【事件流】浅谈事件冒泡事件捕获------【巷子】
首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流。1、什么是事件流?解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受到该事件,这样的传播过程叫DOM事件流。 简单的解释:元素触发事件的时,传播的过程称为事件流。 事件流分为:事件冒泡和事件捕获 2、什么是事件冒泡? 解释:事件冒泡可以形象的比喻成把一个石头丢进水中,泡泡会一直从水底冒出水面,也就是说事件会从最内层的元素开始发生,一直到向上传播,知道根节点 微软公司提出的事件冒泡 3、什么是事件捕获? 解释:假设你是捂裆派的一名弟子,在外游行的时候跟跟别人发生了冲突(假设是缥缈峰),那么缥缈峰的人肯定第一时间就会找到你所在的门派。然后在找到你的师父在找到你, 然后跟你握手言和(纯属扯淡,现实中肯定打的你连你妈都不认识你),这样的一个查找过程就是事件捕获 简单的解释:事件的传播由父元素到子元素传递的过程,称为事件捕获 网景公司提出的事件捕获 --------------------------------------------------------下面让我们进入扯淡的重点环节----------------------------------------------------------------- 4、浏览器事件默认执行并传播的顺序 首先我们先来看事件冒泡执行并执行的顺序
css样式
js代码
当我们去点击oSmall的时候事件执行的顺序为:oSmall---->oBig----->body-----document
----------------------------------------------------------------------------------------------------------------------------------------------------- 接下来我们再来看事件捕获执行并执行的顺序(css html 代码不变) js代码
当我们去点击oSmall的时候事件执行的顺序为:document---->body----->oBig-----oSmall
总结浏览器的事件默认执行并传播的顺序是:
------------------------------------------------------扩展当事件冒泡和事件捕获一起使用的时候执行的顺序------------------------------------------------------
document.onclick = function(){
alert("document---冒泡")
};
document.addEventListener("click",function(){
alert("document---捕获")
},true)
document.body.onclick = function(){
alert("body----冒泡")
}
document.body.addEventListener('click',function(){
alert("body----捕获")
},true)
oBig.onclick = function(){
alert("oBig---冒泡")
}
oBig.addEventListener('click',function(){
alert("oBig----捕获")
},true)
oSmall.onclick = function(){
alert("oSmall--冒泡")
}
oSmall.addEventListener('click',function(){
alert("oSmall----捕获")
},true)
执行顺序为:当点击oSmall的时候执行顺序为
document---捕获 body----捕获 oBig----捕获 oSmall--冒泡 oSmall----捕获 oBig---冒泡 body----冒泡 document---冒泡
个人感觉这些东西在面试的时候会经常遇到。如果有不同意见可以私信本人!互相学习~~ 如需转载请注明出处
转载于:https://www.cnblogs.com/nanianqiming/p/7674745.html
【事件流】浅谈事件冒泡事件捕获------【巷子】相关推荐
- onbeforeunload触发ajax,浅谈window.onbeforeunload() 事件调用ajax
经常有这样的需求,就是在离开某个web页面时,用户不一定点注销,这样会导致会话不能及时销毁.为实现用户离开页面时,自动注销功能,需要在web页面的onbeforeunload事件处理函数中发送注销命令 ...
- php 冒泡置顶,浅谈php冒泡的排序
PHP实现的.代码先奉上: 复制代码 代码如下: function bubble_sort($array) { for ($i = 0; $i < count($array) - 1; $i++ ...
- 浅谈javascript的事件监听——音乐播放器的控制
javascript的事件 javascript是一门基于事件驱动的语言,当html页面中的元素触发一些动作时,可以执行相关的js代码. 1.常见事件 浏览器窗体事件 事件名 描述 onload 当窗 ...
- JS 浅谈JavaScript之事件
转载: https://www.cnblogs.com/wangjiming/p/9983023.html 一 简述JavaScript及其在浏览器中的地位 (一) 浏览器主要构成 虽然不同浏览器 ...
- angularjs中按回车事件_浅谈angularjs中响应回车事件
下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码) angularjs-demo test va ...
- Android事件分发浅谈
Android事件分发机制浅谈 前言:可能Android的事件分发对于刚学Android的童鞋来说接触得不多,这样不奇怪.因为刚学的时候,一般人很难注意到或是会选择主动去了解.那么究竟什么是Andro ...
- 浅谈android的事件分发机制
一.点击事件介绍 在Android 的点击事件中我们涉及到ViewGroup类的三个方法: @Overridepublic boolean dispatchTouchEvent(MotionEvent ...
- 浅谈Vue 自定义事件——原理及用法
前言 在Vue 中,对HTML的原生事件做了支持.例如:click.focus.change等事件.除了原生事件外,Vue 还允许用户自定义事件. 什么是事件?什么是自定义事件? 在了解自定义事件前, ...
- 文本框内容自动投影,浅谈C#中事件的写法与应用
C#中委托和事件,对应设计模式:Observe观察者模式 触发事件A的时候自动引起事件B的改变 有两个打开的窗体Form1,Form2 都有一个文本框控件TextBox Form1的文本框输入内容时, ...
- 浅谈wheel滚轮事件(兼容触摸板多次触发)
wheel 滚轮事件 一.事件说明 当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件 Tips: 使用触摸板触发该事件,由于系统的平滑处理,会触发多次该事件 IE 下无法使用触摸板触发该事件 替换 ...
最新文章
- 一张象限图引发的血案
- dxf转nc代码软件_eCAM高速激光加工软件
- Linux下 jenkins的安装
- OJ系列之---单词倒排
- Python Model : glob 文件路径查找
- MIGO+103收货到GR冻结库存和MB1B+344从非限制到冻结区别?
- Python:用生成器的方式计算任意起止范围内质数的和。
- windows下Meteor+AngularJS开发的坑
- 阿里微服务架构下分布式事务Seata
- 快了!华为Mate X国内发布时间曝光:另有麒麟990版本
- rabbitmq原理总结,Java反射的简单入门
- mysql保存表出错1075_navicat出现错误1075怎么办
- java基础----对象的创建过程(初始化、析构、清理)
- 毕设题目:Matlab优化覆盖
- Fiddler抓包没有网!
- 地图数字化步骤及问题总结
- 《孤独的美食家》60家餐厅超全觅食攻略,吃货必收!
- 微空间私人定向共享系统设计与实现-计算机毕业设计源码+LW文档
- 如何在PowerPoint演示文稿中链接或嵌入Excel工作表
- 人一个月瘦多少斤比较合适
热门文章
- 使用javap分析Java的字符串操作
- 外星人进化_深层分析宇宙常数对生命形成进化的影响,外星人或许根本就“不是人”!...
- php 登陆信息 传递,PHP传递POST信息
- arcgis python实例_arcgis python脚本工具实例教程—栅格范围提取至多边形要素类
- 哈工大威海c语言实验报告 第八章 无法运行程序,哈工大威海c语言实验报告.doc...
- Redis的Linux单机版安装
- c++ 私有内部类_Java内部类新解,你没有见过的船新版本
- 浏览器linux版本,Opera浏览器电脑版|Opera浏览器 V60.0.3255.70 Linux版 下载_当下软件园_软件下载...
- 安卓手机管理器_电脑文件快速搜索有everything,那手机呢?
- java 类说明,java基础类型说明