前戏

　　今天在博客中看到了javascript的事件机制，就自己试试写一个简单的冒泡捕获测试，但是测试结果出乎了我的意料，主要是自己原来对事件了解不是很清楚，现在写篇博客记录下。

基础

　　先来看一下我在Aaron博客中截的一张图

　　DOM2中事件有三个阶段

  1. 事件的捕获阶段
  2. 事件的目标阶段
  3. 事件的冒泡阶段

　　事件的捕获阶段:是由document元素向发生事件的元素传递。

　　事件的目标阶段:是指在找到了发生事件的目标元素这个阶段，找到之后就会执行事件监听器。如果在目标元素上同时绑定捕获和冒泡阶段事件，事件的执行顺序与绑定的顺序有关。其实也好理解，如果是这样的话，在目标元素上绑定了两个阶段的监听事件，因为操作的元素就是目标元素，绑定的事件无须传递，索性就按绑定顺序执行，个人理解。

　　事件的冒泡阶段:指由目标元素向上传递，就是想父元素传递，如果遇到监听的事件就执行。可以这么理解，由于是子元素向祖先传递，祖先当然知道是自己下的事件被监听了，因为父元素一直包含子元素。

　　例子

　　http://sandbox.runjs.cn/show/whkkse7t

　　代码

　　

 <!DOCTYPE HTML>

 <html>

 <head>

 <title>js事件</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style type="text/css">

     #outer{

         border:1px solid red;

         height:200px;

         width:200px;

     }

     #middle{

         border:1px solid blue;

         height:100px;

         width:100px;

         margin:50px auto;

     }

     #inner{

         border:1px solid black;

         height:50px;

         width:50px;

         margin:25px auto;

     }

 </style>

 <script type="text/javascript">

     window.addEventListener("load",init,false);

     function init(){

         var obj = document.getElementById("middle");

         obj.addEventListener("click",function(e){alert(e.target.id+" 冒泡")},false);//1

         obj.addEventListener("click",function(e){alert(e.target.id+" 捕获")},true);//2

     }

     //document.addEventListener("DOMContentLoaded",function(){alert("s")},false);

     //这里为了方便直接在同一个元素绑定了两个事件

     //点击middle元素，依次会执行代码1和2，此时的执行顺序和绑定事件的顺序相同

     //点击inner元素时，会先执行代码2再执行代码1，此时就先执行捕获阶段在执行冒泡阶段

     //可以这么说 如果在目标元素上绑定事件，事件的执行顺序与绑定的执行顺序相同，否则先捕获阶段在冒泡阶段

 </script>

 </head>

 <body>

     <div id="outer">

         <div id="middle">

             <div id="inner">

             </div>

         </div>

     </div>

 </body>

 </html>

javascript的事件的更多相关文章

  1. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  2. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  3. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  4. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

  5. JavaScript的事件代理（转）

    如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...

  6. [转]javascript指定事件处理程序包括三种方式：

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

  7. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  8. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  9. JavaScript 计时事件

    JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计 ...

随机推荐

  1. PHP数据库页面增删查

    1.用户操作页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. LG1268树的重量

    #include<bits/stdc++.h> using namespace std; #define N 35 #define INF 1e9 int dis[N][N],n,len, ...

  3. app跳转

    iOS 从C APP里启动 D APP 首先在D APP里设置 URL Schemes 在info.plist 文件里添加URL Schemes URL Types -->item0 --> ...

  4. mysql之存储过程

    一.存储过程     迄今为止,使用的大多数 SQL语句都是针对一个或多个表的单条语句.并非所有操作都这么简单,经常会有一个完整的操作需要多条语句才能完成.例如,考虑以下的情形.         1. ...

  5. 安装debian第一天遇到的几个问题及解决方案

    1.当我想要使用sudo时,提示 bash: sudo: command not found 一开始以为是PATH不对,就各种百度各种试 export PATH=${PATH}:$HOME/bin:/ ...

  6. 团队开发——冲刺1.c

    冲刺阶段一(第三天) 1.昨天做了什么? 在C#的Windows窗体应用程序中,设计简单的游戏界面. 2.今天准备做什么? 首先把昨天遇到的问题解决了,虽然没有找到原因,但是只要每一步修改后就立即运行 ...

  7. get到的新技能

    1.重拾选择器 (一)类选择器与id选择器的区别 W3C标准这样规定的,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class. 这样,一般网站分为头,体,脚部分,因为考虑到它们 ...

  8. rpm软件包管理

    RPM 有五种基本的操作方式(不包括创建软件包): 安装, 卸载, 升级, 查询,和验证. 下面我们就来逐一的讲解吧. 一. 安装RPM包 RPM 软件包通常具有类似foo-1.0-1.i386.rp ...

  9. ACE - Reactor源码总结整理

    ACE源码约10万行,是c++中非常大的一个网络编程代码库,包含了网络编程的边边角角. ACE代码可以分三个层次:OS层.OO层和框架层: OS层主要是为了兼容各个平台,将网络底层API统一化,这一层 ...

  10. Node.js高级编程读书笔记 - 6 应用程序构建和调试 - Never

    Explanation 现阶段console.log(...),util.inspect(...), JSON.stringify(...)在控制台输出已经够用了[2015/07/19]. 单元测试隶 ...