事件流
---事件冒泡
取消冒泡：ev.cancelBubble=true

---事件捕获
Ie下是没有的，在绑定事件中，标准下是有的

 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <style>

 div {padding: 40px;}

 #div1 {background:red}

 #div2 {background:green}

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

 </style>

 <script>

 window.onload = function() {

     /*

         事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

     */

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

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

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

     function fn1() {

         alert( this.id );

     }

     //oDiv1.onclick = fn1;  给**加事件，给元素加事件处理函数

     //事件函数绑定

     oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1

     //oDiv2.onclick = fn1;

     oDiv3.onclick = fn1;

     //我在马路边捡到一分钱，把他交个警察叔叔

     /*我.on马路边捡到一分钱 = function() {

         把他交个警察叔叔

     }*/

 }

 </script>

 </head>

 <body>

     <div id="div1">

         <div id="div2">

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

         </div>

     </div>

 </body>

 </html>

事件冒泡实例：（侧边栏分享）

 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <style>

 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}

 #div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}

 </style>

 <script>

 window.onload = function() {

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

     oDiv.onmouseover = function() {

         this.style.left = '0px';

     }

     oDiv.onmouseout = function() {

         this.style.left = '-100px';

     }

 }

 </script>

 </head>

 <body>

     <div id="div1">

         <div id="div2">分享到</div>

     </div>

 </body>

 </html>

取消事件冒泡实例：（点击出现下拉框）

 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <style>

 #div1 {width:100px; height:200px; border: 1px solid red; display: none;}

 </style>

 <script>

 window.onload = function() {

     /*

     阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

     */

     var oBtn = document.getElementById('btn');

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

     oBtn.onclick = function(ev) {

         var ev = ev || event;

         ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡

         oDiv.style.display = 'block';

     }

     /*oBtn.onmouseover = function(ev) {

         var ev = ev || event;

         ev.cancelBubble = true;

     }*/

     document.onclick = function() {

         /*setTimeout(function() {

             oDiv.style.display = 'none';

         }, 1000);*/

         oDiv.style.display = 'none';

     }

 }

 </script>

 </head>

 <body>

     <input type="button" value="按钮" id="btn" />

     <div id="div1"></div>

     <p>ppppp</p>

     <p>ppppp</p>

     <p>ppppp</p>

     <p>ppppp</p>

 </body>

 </html>

Javascript 事件对象（三）事件冒泡的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. JavaScript：事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

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

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

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

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

  9. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  10. Vue2学习笔记:事件对象、事件冒泡、默认行为

    1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

随机推荐

  1. 关于rem的学习

    网页常见单位px.em.rem:其中rem是css3新出的单位,官网是这样定义的:“font size of the root element”,意思是:相对长度单位,相对于根元素(即html元素)f ...

  2. cacti监控juniper路由器

    之前也没有写过博客,但是最近一直在做监控.从网上查找很多资料都还是感觉差一点.所以自己添加一份我在cacti监控路由器的步骤. 环境,ubuntu14.04,apt-get install cacti ...

  3. canvas 时钟+自由落体

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

  4. algorithm -- 插入排序

    插入排序是<算法导论>中第一个介绍的算法,详细分析了插入排序的原理,执行过程,证明了算法的正确性.同时也引出了算法分析和算法分析常用的方法. 此文对原文作个转述,检验学到的知识. 文中使用 ...

  5. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E. Goods transportation (非官方贪心解法)

    题目链接:http://codeforces.com/contest/724/problem/E 题目大意: 有n个城市,每个城市有pi件商品,最多能出售si件商品,对于任意一队城市i,j,其中i&l ...

  6. 《JavaScript高级程序设计》读书笔记--（1）JavaScript简介

    概述 JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HT ...

  7. API查看Web App发布版本+编译时间+环境变量

    项目环境: JDK7+Maven3.04 项目架构:SpringMVC 方法一:API访问Maven生成的MANIFEST.MF 1. 在pom.xml中添加jar包支持 <dependency ...

  8. Const(常量)与readonly(只读)的区别

    const与readonly定义的值都不能更改,但它们到底有哪些异同点呢? Const ² Const是常量的意思,其定义的变量只能读取不能更改,且只能在定义时初始化,不能在构造函数与其它属性与方法中 ...

  9. Swift 2.0 异常处理

    转自:http://www.jianshu.com/p/96a7db3fde00 WWDC 2015 宣布了新的 Swift 2.0. 这次重大更新给 Swift 提供了新的异常处理方法.这篇文章会主 ...

  10. 通过InputStream访问文件中的数据的四种方法

    //方法一(每次只读取一个字节) public static void getFile() throws IOException { File file = new File("D:\\a. ...