事件流
---事件冒泡
取消冒泡：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. jsessionid 导致重定向404的问题

    http://tomcat.apache.org/tomcat-5.5-doc/servletapi/javax/servlet/http/HttpServletResponse.html#encod ...

  2. java sqlhelper

    dbinfo.properties部分: 注意每行末尾不可以有空格 #oracle configure UserName=scott Password=tiger Driver=oracle.jdbc ...

  3. 搭建Hadoop2.6.4伪分布式

    准备工作 操作系统 CentOS 7 软件环境 JDK 1.7.0_79 下载地址 SSH,正常来说是系统自带的,若没有请自行搜索安装方法 关闭防火墙 systemctl stop firewalld ...

  4. .net单元测试初探

    写在前面 组里接手了一个在运行的票台系统,包括收银,客户体验,店内商超等子系统,要求将服务端进行云端化,以应对分店的增多和决策层对于数据的需要,而随着时间的退役和各种收费策略的改变,促销活动的展开等, ...

  5. php实现递归的三种方式: 遍历文件夹实例

    递归函数是我们常用到的一类函数,最基本的特点是函数自身调用自身,但必须在调用自身前有条件判断,否则无限无限调用下去.实现递归函数可以采取什么方式呢?本文列出了三种基本方式.理解其原来需要一定的基础知识 ...

  6. 小游戏Item表

    [Config]1|0|我|1|10|500|0|8|2|4|b5222d10-55a7-4789-8541-8e7430345d54|0|0[Config] [Config]2|1|公主|1|0|5 ...

  7. CALayer 3 详解 -----转自李明杰

    CALayer3-层的属性   本文目录 一.隐式动画属性 二.position和anchorPoint 回到顶部 一.隐式动画属性 * 在前面几讲中已经提到,每一个UIView内部都默认关联着一个C ...

  8. iOS 给NSString文字上添加横线 中间和下划线

    有时候我们需要给文字添加横线,有两种情况: 第一种是贯穿中间的横线: 横线的颜色和文字的颜色保持一致 _oldPriceLabel.text = "; _oldPriceLabel.text ...

  9. 查找“asdfjvjadsffvaadfkfasaffdsasdffadsafafsafdadsfaafd” 该字符串中有多少个af

    package lovo.bean; import java.util.Scanner; public class Java { @param args public static void main ...

  10. linux命令每日一练习　wc　more

    wc该命令统计文件行数,字数或者字节数 wc -l 统计行数 wc -w 统计字数 wc -c 统计字节数 more 显示文件内容,类似于cat more +n 从第n行开始显示 more -n 限定 ...