事件捕获：

 <!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. ecshop后台新功能及权限的添加

    1.在后台"推荐管理"里添加"推荐人分成"."会员分成"两个操作功能以及权限 index.php?act=menu incluedes/in ...

  2. Windows Store App 图像

    在Windows应用商店应用中可以使用两种方法来显示图片,这两种方法分别为使用Image对象和使用ImageBrush对象.Image对象可以直接呈现一幅图像,而ImageBrush对象则可以用一幅图 ...

  3. tfs中如何创建团队项目及如何操作团队项目

    创建团队项目集合 tfs server管理控制台\团队项目集合页面.选择'创建集合'链接,按向导即可创建项目集合. 创建团队项目 创建好团队项目集合后,就要开始创建团队项目了. 进入vs,连接上tfs ...

  4. SQL Server中的日期格式化

    SQL Server中文版的默认的日期字段datetime格式是yyyy-mm-dd Thh:mm:ss.mmm 例如: select getdate()    2004-09-12 11:06:08 ...

  5. canvas 时钟+自由落体

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. oracle 查看锁死的表，锁死的进程

    select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked_mode f ...

  7. Flexbox，更优雅的布局

    在设计的眼中,排版的操作是一件很简单的事情,靠左.置中.靠右,我只要点一下,所有元素,就会乖乖的到指定的位置. 但到了前端在排版的实现上,就不是这样了. 我们常常得用一堆其实本来不是这样用的属性来做 ...

  8. Service Broker应用（1）：简介、同server不同DB间的数据传输

    简介:SQL Server Service Broker,以下简称SSB,是一种完全基于MSSQL数据库的数据处理技术,为短时间内处理大量数据提供了一种可靠.稳定.高效的解决方案.一次同步的数据最大可 ...

  9. linux下如何使用sftp命令

    sftp 是一个交互式文件传输程式.它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性.下边就简单介绍一下如何远程连接主机,进行文件的上传和下载,以及一些相关操作. 举例,如远程主机的 IP ...

  10. SDWebImage下载图片有时候无法成功显示出来

    之前用下面的方法现在图片,有时候会出现图片没有下载成功显示: - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)p ...