事件流
---事件冒泡
取消冒泡：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. Android6.0获取权限

    照着<第一行代码>打代码,然并卵,感叹技术进步的神速.最后提醒一点:IT类的书籍一定要注意出版时间!出版时间!出版时间!重要的事情说三遍 问题出在android6.0的权限获取问题上,以前 ...

  2. jQuery验证插件 Validate详解

    1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...

  3. maven私服搭建（centOS6.5）

    maven的好处和私服的应用本文不赘述,私服搭建如下: MAVEN 私服搭建(centOS 6.5 环境) 1.  准备环境,搭建centOS6.5系统环境,略 2.  准备对应的软件包如下: A. ...

  4. POJ 3126 Prime Path

    给定两个四位素数a  b,要求把a变换到b 变换的过程要保证  每次变换出来的数都是一个 四位素数,而且当前这步的变换所得的素数  与  前一步得到的素数  只能有一个位不同,而且每步得到的素数都不能 ...

  5. JVM 平台上的各种语言的开发指南

    JVM 平台上的各种语言的开发指南 为什么我们需要如此多的JVM语言? 在2013年你可以有50中JVM语言的选择来用于你的下一个项目.尽管你可以说出一大打的名字,你会准备为你的下一个项目选择一种新的 ...

  6. canvas 时钟+自由落体

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

  7. 在 Xcode 7 中安装 Alcatraz

    http://www.jianshu.com/p/5c8ed25ad434 安装Xcode7后,继续采用官方方法安装Alcatraz,发现不成功.单独安装XVim也不成功.看了一下Alcatraz的i ...

  8. Python Day03

    set Collections系列: Python拥有一些内置的数据类型,比如str, int, list, tuple, dict等, collections模块在这些内置数据类型的基础上,提供了几 ...

  9. christian louboutin ballerinas outlet

    www.heelschuhe.de, Wie auch immer, Schneiden auf den Punkt; David und Connie in Vancouver: Wir hoffe ...

  10. java打jar包，引用其他.jar文件

    大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个jar包的程序入口. 具体的方法是修改jar包内目录META-INF下的MANIF ...