事件流
---事件冒泡
取消冒泡：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. MVC5+EF6 入门完整教程十一：细说MVC中仓储模式的应用

    摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识. 第二阶段11-20篇将会侧重于专题的讲解,一篇文章解决一个实际问题. 根据园友的反馈, 本篇文章将会先对呼声最高的仓储模式进行讲解. 文 ...

  2. Tableau修改参考线上显示的标签

    修改Tableau中参考线上的标签显示内容,如下图所示:可根据自定义调整

  3. 2016.9.27 --- changchun

    1001 Hanzo vs. Genji 1002 Fraction 1003 Rotate String 1004 Triangle 1005 The Fastest Runner Ms. Zhan ...

  4. ubuntu - 中文

    首先要从Ubuntu语言设置那里,把中文语言包安装上 打开/etc/environment 在下面添加如下两行 LANG="zh_CN.UTF-8″ LANGUAGE="zh_CN ...

  5. .Net消息队列的使用

    版权声明:作者:真爱无限 出处:http://blog.csdn.net/pukuimin1226 本文为博主原创文章版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 ...

  6. 关于DMA和它的仇家

    [基础知识]什么叫做DMA?DMA=Direct Memory Access.这是一种通过硬件实现的数据传输机制.简单的说,就是不在CPU的参与下完成数据的传输.[/基础知识]不太明白?我举个简单的例 ...

  7. 手把手教你在Ubuntu上安装Apache、MySql和PHP

    1:首先安装apache:打开终端(ctrl+Alt+t), 输入命令:sudo apt-get install apache2即可安装, 安装完后,打开浏览器,在地址栏输入:localhost或者h ...

  8. Ruby Cucumber环境

    1.http://rubyinstaller.org/downloads 下载rubyinstaller以及developmentkit(注意版本号要对应) 2.安装rubyinstaller以及解压 ...

  9. [Linux-脚本]排序、统计、合并命令

    1.排序命令 - sort: sort可以帮我们进行排序,排序顺序按照LANG(语系环境变量)确定.据观察,sort排序以行为单位进行.排序以第一个不相同的字符决定先后顺序(只与第一个不相同的字符相关 ...

  10. Android中的onActivityResult和setResult方法的使用

    如果你想在Activity中得到新打开Activity关闭后返回的数据,你需要使用系统提供的startActivityForResult(Intent intent,int requestCode)方 ...