事件捕获：

 <!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. uva 10271 (dp)

    题意:有n个数据,给定k,要从中选出k+8个三元组(x,y,z,其中x<=y<=z),每选一次的代价为(x-y)^2,求最小代价和. [解题方法] 将筷子按长度从大到小排序 排序原因: 由 ...

  2. 告别IT,出售多年自己研发的股票分析系统源码

    不知已过而立,发狠告别IT,回头看看以前自己的多个作品,耗时最多的就是这个股票分析系统了,留在自己的电脑里也体现不出多大价值了,故打算出售源码给需要的人,联系方式QQ:874724605 注明:股票源 ...

  3. 记一次酷派尚锋Y75刷机

    昨天因为手机卡的原因,我的同学帮他的同学刷机,听他说是用刷机精灵线刷的rom包,但是刷机失败了,就来找我把弄好,他是个半吊子水平,刚接触这个东西,也是运气不好,什么刷机失败的问题都让他遇上了,刷了几个 ...

  4. PHP字符串处理函数

    /* * 确定字符串长度 * int strlen(string str) * 比较两个字符串 * 1.strcmp函数对两个字符串进行二进制安全的比较,并区分大小写 * int strcmp(str ...

  5. ios企业应用部署

    最近公司要整一套企业内部用的应用,ios版本不上线要求可以随时下载使用,先是申请了企业者开发账号,然后发布应用,部署在自己服务器上供用户下载安装. 第一步:准备好应用相关的东西,基本上就是两个文件,x ...

  6. 工作中用到的oracle字符串分割整理

    oracle部分: 定义类型(用于字符串分割): create or replace TYPE "STR_SPLIT" IS TABLE OF VARCHAR2 (4000); 字 ...

  7. （DFS、全排列）POJ-3187 Backward Digit Sums

    题目地址 简要题意: 输入两个数n和m,分别表示给你1--n这些整数,将他们按一定顺序摆成一行,按照杨辉三角的计算方式进行求和,求使他们求到最后时结果等于m的排列中字典序最小的一种. 思路分析: 不难 ...

  8. javap反编译解释外部类直接使用内部类private字段的原理

    2016-07-04 15:56:39 我们都知道: 1.内部类可以直接访问外部类的private字段和方法: 2.非静态内部类持有外部类的引用: 3.外部类可以直接访问内部类的private字段和方 ...

  9. ASP.NET DAY1

    <!-- AutoEventWireup,CodeBehind,Inherits等属性可省略, Language属性为必须项 --> <%@ Page Language=" ...

  10. MySQL Workbench的使用教程 （初级入门版）

    MySQL Workbench 是 MySQL AB 最近释放的可视数据库设计工具.这个工具是设计 MySQL 数据库的专用工具. MySQL Workbench 拥有很多的功能和特性:这篇由Djon ...