事件捕获：

 <!DOCTYPE HTML>

 <html>

 <head>

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

 <title>无标题文档</title>

 <style>

 div {padding: 50px;}

 #div1 {background: red;}

 #div2 {background: blue;}

 #div3 {background: green; position: absolute; top: 300px;}

 </style>

 <script>

 window.onload = function() {

     var oDiv1 = document.getElementById('div1');

     var oDiv2 = document.getElementById('div2');

     var oDiv3 = document.getElementById('div3');

     function fn1() {

         alert( this.id );

     }

     /*oDiv1.onclick = fn1;

     oDiv2.onclick = fn1;

     oDiv3.onclick = fn1;*/

     //true  = 进去的事件

     //false = 出去的事件

     //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数

     /*oDiv1.addEventListener('click', fn1, false);

     oDiv2.addEventListener('click', fn1, false);

     oDiv3.addEventListener('click', fn1, false);*/

     //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数

     /*oDiv1.addEventListener('click', fn1, true);

     oDiv2.addEventListener('click', fn1, true);

     oDiv3.addEventListener('click', fn1, true);*/

     oDiv1.addEventListener('click', function() {

         alert(1);

     }, false);

     oDiv1.addEventListener('click', function() {

         alert(3);

     }, true);

     oDiv3.addEventListener('click', function() {

         alert(2);

     }, false);

     //

 }

 </script>

 </head>

 <body>

     <div id="div1">

         <div id="div2">

             <div id="div3"></div>

         </div>

     </div>

 </body>

 </html>

Javascript 事件对象（五）事件捕获的更多相关文章

  1. JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  2. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  3. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  4. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  5. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  6. JavaScript的事件概述以及事件对象，事件流

    事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...

  7. 从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）

    一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...

  8. Javascript中的事件对象和事件类型

    接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...

  9. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  10. jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

随机推荐

  1. ［IOS 开发］TableView如何刷新指定的cell 或section

    //一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:]; [tableview reloadSections:ind ...

  2. WCF初探-28：WCF中的并发

    理解WCF中的并发机制 在对WCF并发机制进行理解时,必须对WCF初探-27:WCF中的实例化进行理解,因为WCF中的并发特点是伴随着服务实例上下文实现的.WCF的实例上下文模型可以通过Instanc ...

  3. （转）Tomcat数据源连接池加密

    文章来源 :http://my.oschina.net/cimu/blog/164757 我们在使用Tomcat数据库连接池的时候都是明文存储数据库用户名和密码的,例如: <Resource n ...

  4. JavaEE MyBatis

    1.  简介 MyBatis本是apache的一个开源项目iBatis的升级版,2013年11月迁移到Github,是三层架构中持久层框架. 目前提供了Java..NET.以及Ruby三种语言实现的版 ...

  5. [css3]水平垂直居中

    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);

  6. spring框架详解： IOC装配Bean

    1 Spring框架Bean实例化的方式: 提供了三种方式实例化Bean. 构造方法实例化:(默认无参数) 静态工厂实例化: 实例工厂实例化: 无参数构造方法的实例化: <!-- 默认情况下使用 ...

  7. 非maven项目导入idea几点心得总结

    这个问题一共有3种解决办法1. 你下载好的文件应该是src 和Webcontent是在同一个目录下的.只要把Webcontent放入到src下就行.这种就变成maven的目录结构.因为你这个目录结构应 ...

  8. 讨论SEO中是锚文本有效，还是纯文本有效呢？

    现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...

  9. JS技术大全

    事件源对象:event.srcElement.tagName  event.srcElement.type 捕获/释放:event.srcElement.setCapture();  event.sr ...

  10. LINUX centos 忘记密码

    entos7采用的是grub2,和centos6.x进入单用户的方法不同.但是因为用的是真机环境无法截图,所以只是大概描述以下思路. init方法 1.centos7的grub2界面会有两个入口,正常 ...