事件冒泡 ： 当一个元素接收到事件的时候，会把它接收到的所有传播给它的父级。一直到顶层window。这种现象称之为事件冒泡机制。出去的事件触发。
阻止冒泡 ： 当前要阻止冒泡的事件函数中，调用 event.cancelBubble = true;
事件捕获 ： ie下是没有的，在绑定事件中，标准下是有的。进来的事件触发。
 
给对象绑定函数的形式：
1.给一个对象绑定一个事件处理函数：
obj.onclick = fn;
 

2.给一个对象的同一个事件绑定多个不同的函数：

ie ： obj.attachEvent(事件名称,事件函数)
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序 ：标准ie --> 正序，非标准ie ---> 倒序
4.this 指向 window
 
标准 ： obj.addEventListener(事件名称,事件函数,是否捕获)
1.有捕获
2.事件名称没有on
3.事件函数执行的顺序 ：正序
4.this 指向触发该事件的对象
 
取消事件绑定：
第一种事件绑定形式的取消：
obj.onclick = null;
第二种：
ie : obj.detachEvent(事件名称，事件函数)
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获)
 
是否捕获：默认是false     false ： 冒泡     true ： 捕获
 
call 函数下的一个方法，call方法的第一个参数可以改变函数执行过程中的内部this的指向。
call 方法的第二个参数开始就是原来函数的参数列表。
 
 
 
 
事件捕获示例代码：
 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>事件捕获</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <script>

             window.onload = function(){

                 function fn1(){

                     alert(this);

                     alert(1);

                 }

                 function fn2(){

                     alert(this);

                     alert(2);

                 }

                 /*

                 document.onclick = fn1;

                 document.onclick = fn2; //后面的覆盖前面的

                 */

                 //ie写法

                 //document.attachEvent('onclick',fn1);

                 //document.attachEvent('onclick',fn2);

                 //标准写法

                 //document.addEventListener('click',fn1,false);

                 //document.addEventListener('click',fn2,false);

                 //兼容写法

                 function bind(obj, evname, fn){

                     if(obj.addEventListener){

                         obj.addEventListener(evname, fn, false);

                     }else{

                         obj.attachEvent('on' + evname, function(){

                             fn.call(obj);

                         });

                     }

                 }

                 bind(document,'click',fn1);

                 bind(document,'click',fn2);

             }

         </script>

     </head>

     <body>

         <div>

         </div>

     </body>

 </html>

call示例代码：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>call</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <script>

             window.onload = function(){

                 function fn1(){

                     alert(this);

                 }

                 function fn2(a,b){

                     alert(this);

                     alert(a+b);

                 }

                 //fn1();   //window

                 //fn1.call();  //弹出window,此时就等同于fn1()

                 //fn1.call(1); //弹出1，call的第一个参数为this的指向

                 //fn2.call(1,4,10); //依次弹出1，14，如果函数有参数时，则第一个为this的指向，后面为函数带的参数

                 fn2.call(null,4,10); //依次弹出window，14，第一个参数为null表示不改变this指向。

             }

         </script>

     </head>

     <body>

         <div>

         </div>

     </body>

 </html>

js学习笔记26----事件冒泡，事件捕获的更多相关文章

  1. node.js学习笔记（三）——事件循环

    要理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互 ...

  2. Node.js学习笔记（三）: 事件机制

    大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...

  3. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  4. 【JS学习笔记】提取行间事件

    行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...

  5. [JS学习笔记]浅谈Javascript事件模型

    DOM0级事件模型 element.on[type] = function(){} 兼容性:全部支持   lay1 lay2 lay3 e.target:直接触发事件的元素[IE8及以下不支持tage ...

  6. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  7. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  8. JS 事件冒泡、捕获。学习记录

    作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...

  9. js学习笔记---事件代理

    事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...

随机推荐

  1. 真人测试网站用户体验的超棒在线服务 - Peek by UserTesting

    闲逛的过程中找到的这个工具网站,它可以帮助你测试你的网站用户体验,而且会发送给你一个5分钟的视频来展示一个实际的用户(不是机器,是人哦)如何操作你的网站的,这个服务目前免费,大家如果有兴趣了解你的网站 ...

  2. EXPDP/IMPDP与EXP/IMP在不同用户和表空间之间迁移数据的实现方法

    1. EXPDP/IMPDP方式 SQL> create user zlm identified by zlm; User created. SQL> grant connect,reso ...

  3. 华为P6-C00电信版，刷机总是失败？ FAIL

    关于这个刷机失败的问题,我只想说一点: 华为P6-C00电信版刷机时,不是任意版本都可以刷到任意版本的.我只往上刷过,那就是华为的升级文档中有说明:“只有以下版本才可以升级到此版本”. 如果你的手机的 ...

  4. HDU4626+博弈

    博弈... /* 博弈 对于当前人来说,如果完成自己的操作后,若mat[n][m]==0,则自己是胜者. 因为 如果mat其他位置不存在1了,肯定自己胜:如果存在1,则让下一位去反转那个1. */ # ...

  5. 算法笔记_149:图论之桥的应用(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 1310 One-way traffic In a certain town there are n intersections connected ...

  6. Python list替换元素

    替换直接对应位置赋值 假设现在班里仍然是3名同学: >>> L = ['Adam', 'Lisa', 'Bart'] 现在,Bart同学要转学走了,碰巧来了一个Paul同学,要更新班 ...

  7. wap、app移动端页面常用html标签汇总

    1.section 将内容组织到精确的语义块,表示页面的一部分. 2.article article表示网页的一个文章.故事. 3.header (1)用在整页的页头 (2)section或者arti ...

  8. Java之速记(1) - 小结与疑惑

    接触Java也有几个年头了,从对编程没有什么概念的新人(在大学里啃J2SE6.0编程指南),到工作用Play框架写一些简单的模块,再到用Structs2+Hibernate编写主要模块,再到现在独立开 ...

  9. Linux命令-压缩解压命令:bzip2、bunzip2

    bzip2是gzip的升级版 bzip2 [选项] 源文件名(压缩前) -k 保留源文件,(区别gzip不支持保留源文件) bunzip2 [选项] 源文件名(压缩后) 压缩文件: bzip2 -k ...

  10. baidu经纬度坐标与google经纬度坐标都转换

    baidu经纬度坐标与google经纬度坐标都是经过转换的.使用下面那个url可以将原始坐标或者谷歌的坐标转换成baidu的坐标http://api.map.baidu.com/ag/coord/co ...