JavaScript事件学习小结(一)事件流


Posted in Javascript onJune 09, 2016

相关阅读:

JavaScript事件学习小结(五)js中事件类型之鼠标事件

JavaScript事件学习小结(一)事件流 JavaScript事件学习小结(一)事件流 JavaScript事件学习小结(一)事件流

2、事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。

冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>

上面这段html代码中,单击了页面中的<div>元素,

在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document

在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>

JavaScript事件学习小结(一)事件流JavaScript事件学习小结(一)事件流

note:

1)、所有现代浏览器都支持事件冒泡,但在具体实现中略有差别:

IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。

IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2)、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。

3)、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡。

DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象,从document对象开始,也在document对象结束。

JavaScript事件学习小结(一)事件流

DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段:实际目标(<div>)在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>再到<body>就停止了。上图中为1~3.

处于目标阶段:事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。

冒泡阶段:事件又传播回文档。

note:

1):DOM标准规定事件捕获阶段捕获涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段出发事件对象上的事件。结果,就是有两次机会在目标对象上面操作事件。

2):并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。

两次机会在目标对象上面操作事件例子:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style>
 #outer{
 position: absolute;
 width: 400px;
 height: 400px;
 top:0;
 left: 0;
 bottom:0;
 right: 0;
 margin: auto;
 background-color: deeppink;
 }
 #middle{
 position: absolute;
 width: 300px;
 height:300px;
 top:50%;
 left: 50%;
 margin-left: -150px;
 margin-top: -150px;
 background-color: deepskyblue;
 }
 #inner{
 position: absolute;
 width: 100px;
 height:100px;
 top:50%;
 left:50%;
 margin-left: -50px;
 margin-top: -50px;;
 background-color: darkgreen;
 text-align: center;
 line-height: 100px;
 color:white;
 }
 #outer,#middle,#inner{
 border-radius:100%;
 }
</style>
<body>
<div id="outer">
 <div id="middle">
 <div id="inner">
 click me!
 </div>
 </div>
</div>
<script>
 var innerCircle= document.getElementById("inner");
 innerCircle.addEventListener("click", function () {
 alert("innerCircle的click事件在捕获阶段被触发");
 },true);
 innerCircle.addEventListener("click", function () {
 alert("innerCircle的click事件在冒泡阶段被触发");
 },false);
 var middleCircle= document.getElementById("middle");
 middleCircle.addEventListener("click", function () {
 alert("middleCircle的click事件在捕获阶段被触发");
 },true);
 middleCircle.addEventListener("click", function () {
 alert("middleCircle的click事件在冒泡阶段被触发");
 },false);
 var outerCircle= document.getElementById("outer");
 outerCircle.addEventListener("click", function () {
 alert("outerCircle的click事件在捕获阶段被触发");
 },true);
 outerCircle.addEventListener("click", function () {
 alert("outerCircle的click事件在冒泡阶段被触发");
 },false);
</script>
</body>
</html>

运行效果就是会陆续弹出6个框,为说明原理我整合成了一个图:

JavaScript事件学习小结(一)事件流

3、事件流的典型应用——事件代理

传统的事件处理中,需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧,通过它可以把事件处理器添加到一个父级元素上,从而避免把事件处理器添加到多个子级元素上。

事件代理的原理用到的就是事件冒泡和目标元素,把事件处理器添加到父元素,等待子元素事件冒泡,并且父元素能够通过target(IE为srcElement)判断是哪个子元素,从而做相应处理。关于target更多内容请参考javaScript事件学习小结(四)event的公共成员(属性和方法)下面举例来说明。

传统事件处理,为每个元素添加事件处理器,代码如下:

<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
 var colorList=document.getElementById("color-list");
 var colors=colorList.getElementsByTagName("li");
 for(var i=0;i<colors.length;i++)
 {
 colors[i].addEventListener('click',showColor,false);
 };
 function showColor(e)
 {
 e=e||window.event;
 var targetElement=e.target||e.srcElement;
 alert(targetElement.innerHTML);
 }
})();
</script>
</body>

事件代理的处理方式,代码如下:

<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
 var colorList=document.getElementById("color-list");
 colorList.addEventListener('click',showColor,false);
 function showColor(e)
 {
 e=e||window.event;
 var targetElement=e.target||e.srcElement;
 if(targetElement.nodeName.toLowerCase()==="li"){
 alert(targetElement.innerHTML);
 }
 }
})();
</script>
</body>

总结一下事件代理的好处:

a、将多个事件处理器减少到一个,因为事件处理器要驻留内存,这样就提高了性能。想象如果有一个100行的表格,对比传统的为每个单元格绑定事件处理器的方式和事件代理(即table上添加一个事件处理器),不难得出结论,事件代理确实避免了一些潜在的风险,提高了性能。

b、DOM更新无需重新绑定事件处理器,因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素(a,span,div等),直接修改事件代理的事件处理函数即可,不需要重新绑定处理器,不需要再次循环遍历。

以上所述是小编给大家介绍的JavaScript事件学习小结(一)事件流的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
Vue仿支付宝支付功能
May 25 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
小程序实现上下切换位置
Nov 16 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 #Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
Active控件问题小结(附解决办法)
Jun 09 #Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 #Javascript
You might like
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
js实现幻灯片轮播图
2020/08/14 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
党校自我鉴定范文
2013/10/02 职场文书
会议主持词
2014/03/17 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
2014年预算员工作总结
2014/12/05 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
办公用品管理制度
2015/08/04 职场文书
《包身工》教学反思
2016/02/23 职场文书
详解Vue的options
2021/05/15 Vue.js
MySQL创建表操作命令分享
2022/03/25 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python