带你快速理解javascript中的事件模型


Posted in Javascript onAugust 14, 2017

javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。

一.  DOM0级事件模型

DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单。代码如下:

<p id = 'click'>click me</p>
<script>
 document.getElementById('click').onclick = function(event){
  alert(event.target);
 }
</script>

这种事件模型就是直接在dom对象上注册事件名称,这段代码就是在p标签上注册了一个onclick事件,在这个事件函数内部输出点击的目标。而解除事件则更加简单,就是将null复制给事件函数,如下:

document.getElementById('click'_).onclick = null;

由此我们可以知道dom0中,一个dom对象只能注册一个同类型的函数,因为注册多个同类型的函数的话,就会发生覆盖,之前注册的函数就会无效。

var click = document.getElementById('click');
click.onclick = function(){
 alert('you click the first function');
};
click.onclick = function(){
 alert('you click the second function')
}

在这段代码中,我们为dom对象注册了两个onclick函数,但是结果是只执行了第二个注册的函数,前面所注册的函数被覆盖了。

二.   DOM2级事件模型

1.  事件捕获和事件冒泡(capture,bubble)

首先,IE8及以下是不支持这种事件模型的。事件捕获和事件冒泡的机制如下图:

带你快速理解javascript中的事件模型

如上图所示,123代表事件捕获,4567代表事件冒泡。首先我们使用下面的代码:

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
 <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>

假设我们点击了ID为inner的div,那么此时的事件流程就是,首先执行捕获阶段:document-html-body-div(outer)。然后执行冒泡阶段:div(inner)-div(outer)-body-html-document。

  2.   DOM2级的注册事件和解除事件

在DOM2级中使用addEventListener和removeEventListener来注册和解除事件(IE8及之前版本不支持)。这种函数较之之前的方法好处是一个dom对象可以注册多个相同类型的事件,不会发生事件的覆盖,会依次的执行各个事件函数。

addEventListener('事件名称','事件回调','捕获/冒泡')。示例如下:

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
 <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
 var click = document.getElementById('inner');
 click.addEventListener('click',function(){
  alert('click one');
 },false);
 click.addEventListener('click',function(){
  alert('click two');
 },false);
</script>

首先我们要知道addEventListenr的第一个参数是事件名称,与DOM0级不同的是没有”on“,另外第三个参数代表捕获还是冒泡,true代表捕获事件,false代表冒泡事件。

而在这段代码中,我们为inner的div注册了两个click事件函数,结果是浏览器会依次执行这两个函数。

下面我们演示如何使用事件流的发生机制。

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
 <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
 var click = document.getElementById('inner');
 var clickouter = document.getElementById('outer');
 click.addEventListener('click',function(){
  alert('inner show');
 },true);
 clickouter.addEventListener('click',function(){
  alert('outer show');
 },true);
</script>

这段代码,我们使用了捕获事件,由于inner是嵌套在outer中的,所以我们知道当使用捕获的时候outer是应该首先捕获到这个事件的,其次inner才能捕获到这个事件。那么结果就是outer首先执行,其次是inner执行。

那么我把outer的执行时机改为冒泡的阶段呢?

alickouter.addEventListener('click',function(){
 alert('outer show'); 
},false);

这种情况下,就是先执行inner后执行outer了。同理我们把二者的事件执行时机都改为冒泡阶段的话,依旧是先执行inner后执行outer。那么还有个问题,就是如果我们把inner注册两个click事件,一个是在捕获阶段,另一个是在冒泡阶段,也就是说把addEventListenter的第三个参数分别设置为false和true,那么执行的顺序又是怎样的呢。

<script>
 var click = document.getElementById('inner');
 var clickouter = document.getElementById('outer');
 click.addEventListener('click',function(){
  alert('capture show');
 },true);
 click.addEventListener('click',function(){
  alert('bubble show');
 },false);
</script>

这种情况下首先这些的是capture show,其次是bubble show。但是这种结果是与注册的顺序有关系的,先注册就先执行。因为我们在看事件捕获和事件冒泡示意图,发现最后具体的dom对象是只有一个的。

那么 如果我们给outer和inner都注册了click事件但是我不希望outer执行怎么办呢?这个时候我们就需要用到stopPropagation函数了,这个函数是用来阻止冒泡,言下之意是让事件不再继续冒泡下去,这样接下来注册同样类型事件的dom对象就不会执行了。

比如在自制下拉框的时候,我们点击浏览器的其他位置,我们需要下拉框的options隐藏,这时我们就要用到stopPropagation了。如下:

<script>
 var click = document.getElementById('inner');
 var clickouter = document.getElementById('outer');
 click.addEventListener('click',function(event){
  alert('inner show');
  event.stopPropagation();
 },false);
 clickouter.addEventListener('click',function(){
  alert('outer show');
 },false);
</script>

正常的情况下,我们在不添加stopPropagation函数时,首先应该执行inner,然后执行outer,但是当我们在inner的事件函数中添加了stopPropagation函数之后,执行完inner的事件函数之后,就不会在执行outer的事件函数了,也可以理解为事件冒泡到inner之后就消失了,因此也就不会在执行接下来的事件函数了。

由于事件捕获阶段没有可以阻止事件的函数,所以一般都是设置为事件冒泡。

好了以上就是全部内容啦 ,希望对大家的学习有所帮助~~

Javascript 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
封装属于自己的JS组件
Jan 27 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JS获取子、父、兄节点方法小结
Aug 14 #Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 #Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 #Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 #Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 #Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
会计找工作求职信范文
2013/12/09 职场文书
卫生巾广告词
2014/03/18 职场文书
运动会加油稿20字
2014/11/15 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python