带你快速理解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浏览器事件模型  # 这段  # 的是  # 都是  # 就会  # 是在  # 多个  # 情况下  # 不支持  # 第三个  # 设置为  # 结果是  # 是一个  # 下拉框  # 我不  # 好了  # 有个  # 在这个  # 第一个  # 又是  # 也就 

相关文章： 如何通过云梦建站系统实现SEO快速优化？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  如何在Windows 2008云服务器安全搭建网站？  如何在企业微信快速生成手机电脑官网？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  油猴 教程,油猴搜脚本为什么会网页无法显示？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  建站与域名管理如何高效结合？  建站之星安装后如何自定义网站颜色与字体？  建站主机与服务器功能差异如何区分？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  如何零成本快速生成个人自助网站？  建站之星后台密码如何安全设置与找回？  动图在线制作网站有哪些,滑动动图图集怎么做？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  建站之星下载版如何获取与安装？  建站三合一如何选？哪家性价比更高？  如何选择高效响应式自助建站源码系统？  建站之星官网登录失败？如何快速解决？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  如何高效生成建站之星成品网站源码？  文字头像制作网站推荐软件,醒图能自动配文字吗？  潍坊网站制作公司有哪些,潍坊哪家招聘网站好？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  专业网站建设制作报价,网页设计制作要考什么证？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  建站之星安全性能如何？防护体系能否抵御黑客入侵？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  制作公司内部网站有哪些,内网如何建网站？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  广州营销型建站服务商推荐：技术优势与SEO优化解析  如何用西部建站助手快速创建专业网站？  教学网站制作软件,学习*后期制作的网站有哪些？  ,怎么用自己头像做动态表情包？  Android自定义listview布局实现上拉加载下拉刷新功能  如何快速查询网站的真实建站时间？  如何在腾讯云免费申请建站？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  如何在建站主机中优化服务器配置？  网站专业制作公司有哪些,做一个公司网站要多少钱？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  linux top下的 minerd 木马清除方法  活动邀请函制作网站有哪些,活动邀请函文案？  seo网站制作优化,网站SEO优化步骤有哪些？  如何在阿里云通过域名搭建网站？  公司门户网站制作流程,华为官网怎么做？