事件流
---事件冒泡
取消冒泡：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. F2.Net工作流引擎系列索引

    索引如下 F2工作流引擎遵循参考WFCM标准规范,符合中国国情特色,更轻量级的工作流引擎,支持多种数据库(mmsqlserver,mysql,oracle),有强大智能的组织模型接口可快速应用到任何基 ...

  2. JS数组常用函数以及查找数组中是否有重复元素的三种常用方法

    阅读目录: DS01:常用的查找数组中是否有重复元素的三种方法 DS02:常用的JS函数集锦 DS01.常用的查找数组中是否有重复元素的三种方法  1. var ary = new Array(&qu ...

  3. asp.netajax开发应用心得-accordation控件的事件处理

    今天,再次运行以前的项目时,发现按钮的单击事件不起作用了,加了断点之后发现根本没有触发该事件.... 按照网上找到的答案,有的说把控件删掉重新拖拽一个进去,虽然以前也遇到过控件失效,重新拖拽有效的时候 ...

  4. 洛谷 1004 dp或最大费用流

    思路: dp方法: 设dp[i][j][k][l]为两条没有交叉的路径分别走到(i,j)和(k,l)处最大价值. 则转移方程为 dp[i][j][k][l]=max(dp[i-1][j][k-1][l ...

  5. C语言经典例题100

    C语言经典例题100 来源 http://www.fishc.com 适合初学者 ----------------------------------------------------------- ...

  6. SAE使用心得1

    最近准备在新浪云端SAE上挂点自己的小网站,这样自己开发个什么东西别人能用.但是第一次接触SAE,遇到一些问题,记下来给大家看. 1.安装的svn版本不能高于 1.8,否则无法向SAE提交代码. 2. ...

  7. python简单文件操作

    写软件著作申请,需要将所有源代码代码贴入一个word中,在源代码前后要添加一些标记,如下: //////////////////////////// //filename1 ///////////// ...

  8. EF的增删改查

    //获取分组信息        public List<UserGroupLogSys> GetUserGroupLogSyslist(int pageIndex, int pageSiz ...

  9. jQuery原生框架-----------------核心框架

    // 1.自调防止全局变量污染(function( window ) { var version = '1.0.0'; var document = window.document; var arr ...

  10. 硬件抽象层——HAL

    (一)为什么要在android中加入HAL Linux系统中Linux驱动有两种类型的代码:访问硬件寄存器的代码——调用的Linux内核的标准函数进行的标准操作  业务逻辑代码——有些企业或个人并不想 ...