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

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及以下是不支持这种事件模型的。事件捕获和事件冒泡的机制如下图：

　　如上图所示，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  # 模型  # js事件模型与自定义事件实例解析  # javascript事件捕获机制【深入分析IE和DOM中的事件模型】  # javascript事件模型介绍  # javascript事件模型实例分析  # Javascript基础知识（一）核心基础语法与事件模型  # 关于javascript DOM事件模型的两件事  # javascript 传统事件模型构造的事件监听器实现代码  # javascript事件模型代码  # 详解JS浏览器事件模型  # 这段  # 的是  # 都是  # 就会  # 是在  # 多个  # 情况下  # 不支持  # 第三个  # 设置为  # 结果是  # 是一个  # 下拉框  # 我不  # 好了  # 有个  # 在这个  # 第一个  # 又是  # 也就 

相关文章： c# 在ASP.NET Core中管理和取消后台任务  网站制作难吗安全吗,做一个网站需要多久时间？  已有域名能否直接搭建网站？  装修招标网站设计制作流程,装修招标流程？  如何用wdcp快速搭建高效网站？  历史网站制作软件,华为如何找回被删除的网站？  建站上市公司网站建设方案与SEO优化服务定制指南  高防服务器：AI智能防御DDoS攻击与数据安全保障  ,交易猫的商品怎么发布到网站上去？  宿州网站制作公司兴策,安徽省低保查询网站？  制作表格网站有哪些,线上表格怎么弄？  阿里云网站制作公司,阿里云快速搭建网站好用吗？  建站OpenVZ教程与优化策略：配置指南与性能提升  建站主机选购指南与交易推荐：核心配置解析  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  平台云上自主建站：模板化设计与智能工具打造高效网站  C++如何使用std::optional？（处理可选值）  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  外贸公司网站制作哪家好,maersk船公司官网？  图册素材网站设计制作软件,图册的导出方式有几种？  大同网页,大同瑞慈医院官网？  香港服务器选型指南：免备案配置与高效建站方案解析  赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  如何在阿里云购买域名并搭建网站？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  b2c电商网站制作流程,b2c水平综合的电商平台？  公司网站制作费用多少,为公司建立一个网站需要哪些费用？  建站主机SSH密钥生成步骤及常见问题解答？  如何快速辨别茅台真假？关键步骤解析  SQL查询语句优化的实用方法总结  常州自助建站费用包含哪些项目？  如何优化Golang Web性能_Golang HTTP服务器性能提升方法  股票网站制作软件,网上股票怎么开户？  如何高效完成独享虚拟主机建站？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  C++如何编写函数模板？（泛型编程入门）  建站org新手必看：2024最新搭建流程与模板选择技巧  用v-html解决Vue.js渲染中html标签不被解析的问题  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  网站制作价目表怎么做,珍爱网婚介费用多少？  PHP 500报错的快速解决方法  建站之星如何快速更换网站模板？  在线教育网站制作平台,山西立德教育官网？  内部网站制作流程,如何建立公司内部网站？  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  如何通过VPS建站无需域名直接访问？