事件捕获：

 <!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. 不同json如何使用jsonArray以及ajax如何取,实现读取新闻

    jsp界面 <%@ page contentType="text/html;charset=gb2312"%><%@page import="org.j ...

  2. innodb log file size 配置估算以及修改

    root@localhost:(none) 06:22:17>pager grep seq PAGER set to 'grep seq' root@localhost:(none) 06:30 ...

  3. hdoj 5074

    Problem Description Hatsune Miku is a popular virtual singer. It is very popular in both Japan and C ...

  4. Android扫盲教程大全经典教程全分享

    Android扫盲教程大全经典教程全分享,相当于android的简单用户手册下载路径 Android扫盲教程大全经典教程全分享.rar

  5. thunkify和co的邂逅

    上一篇说到thunkify的作用,这一篇说一下thunkify和co的集合 co中有一块代码 /** * Convert a thunk to a promise. * * @param {Funct ...

  6. NPOI 导出Excel2007版本时出现流已关闭问题

    NPOI生产.xlsx文件件时,在使用book.Write(ms);后,会关闭流,这样导致再次使用Respons输出流的时候就出错了. 我看到一些网友提供的解决办法是: public class NP ...

  7. 检索 COM 类工厂中 CLSID 为 {820280E0-8ADA-4582-A1D9-960A83CE8BB5} 的组件失败，原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))。

    检索 COM 类工厂中 CLSID 为 {820280E0-8ADA-4582-A1D9-960A83CE8BB5} 的组件失败,原因是出现以下错误: 80040154 没有注册类 (异常来自 HRE ...

  8. 使用Word发表博客

        使用浏览器编辑博客,会让你感到非常不方便,如果在没有网络的时候,就不能打开编辑器页面了,只能先写在word或其他编辑软件中.可以设置word使用word编辑并直接发布到博客.   文件 - 新 ...

  9. 白皮 Chapter 1

    6.29 今天主要做了一些1.5中的小结和练习,果然换语言思路也要跟着变么…各种不爽啊不爽… scanf各种忘记&,还有各种忘记return 0… average temperature su ...

  10. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...