事件捕获：

 <!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. Input钱币规范化

    要求限制input的输入内容,只有输入0-9的数字,backspace,delete,小数点,还有左右移动有效,reFormat函数用于input得到光标时将带逗号的金钱格式转化为没有逗号的字符串,a ...

  2. MVC5+EF6 入门完整教程六

    本篇我们谈谈分部视图(Partial View). 上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用 ...

  3. python二进制相关

    https://docs.python.org/3/library/struct.html#module-struct

  4. bat中rar压缩命令

    数据库备份,导出的dmp 文件比较大,需要压缩,压缩后大小能变为原来十分之一左右吧. 写的是批处理的语句,每天调用,自动导出dmp 文件,压缩删除原文件. 首先写下路径,先将压缩软件的路径写入系统的环 ...

  5. Win10

    安装 调优 关闭cortana 对于SSD: 关闭windows search , superfetch服务,减少磁盘读写 关闭动画(个性化里面) 开启项优化 休眠文件(powercfg -h off ...

  6. tomcat重启脚本

    #!/bin/bashPATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/binexport JAVA_HOME=/opt/jd ...

  7. hdoj 1385Minimum Transport Cost

    卧槽....最近刷的cf上有最短路,本来想拿这题复习一下.... 题意就是在输出最短路的情况下,经过每个节点会增加税收,另外要字典序输出,注意a到b和b到a的权值不同 然后就是处理字典序的问题,当松弛 ...

  8. ORCALE复制表结构

    1.oracle 复制表结构 不要内容 create table 表1 as select * from 表2 where 1=2 2.oracle 复制表结构 要内容 create table 表1 ...

  9. java给不同步的集合加上同步锁

    给非同步的集合加锁: class MyCollections{//创建工具类,提供对外访问方法 public static list synList(List list){ return new My ...

  10. python 中BeautifulSoup入门

    什么是BeautifulSoup? Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖析树(parse tree). 它提供简单又常用的 ...