事件冒泡 ： 当一个元素接收到事件的时候，会把它接收到的所有传播给它的父级。一直到顶层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. ubuntu 下安装 VIM 依赖vim-common错误

    ubuntu 下安装 VIM 依赖vim-common错误 sudo apt-get remove vim-common   先把上面的错误依赖删除 sudo apt-get install vim  ...

  2. 微信小程序-自定义组件

    自定义一个swiper轮播. index index.wxml <!--logs.wxml--> <swiperBanner Height="450rpx" im ...

  3. Python 访问set

    访问set 由于set存储的是无序集合,所以我们没法通过索引来访问. 访问 set中的某个元素实际上就是判断一个元素是否在set中. 例如,存储了班里同学名字的set: >>> s ...

  4. 【Linux】mkdir命令

    用途 mkdir命令主要是用来建立目录的 全称 mkdir的全称为:Make Directory 参数 -m :配置文件的权限 -p :帮助你直接将所需要的目录递归建立起来 案例 进入到目录/usr/ ...

  5. Linux命令-网络命令:write

    write只能给登录用户发送消息,所以先登录两个用户root和wangyunpeng root登录: wangyunpeng登录: who 查看登录用户 root发送信息给wangyunpeng: w ...

  6. EMQTT benchmark测试

    #-c 最大的客户端数据, -i:时间间隔 -t:订阅主题 -q:订阅方式 ./emqtt_bench_sub -c 50000 -i 10 -t bench/%i -q 2 notice: You ...

  7. 摘： VS2010 C++ 调用 DLL （C++编写）

    一.为什么需要dll 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用. 比较常见的例子是各种应用程序框架,如ATL. ...

  8. ORC 资料Mark

    1 OCR开源代码网址汇总  1.1 OCRE(OCR Easy), http://lem.eui.upm.es/ocre.html 1.2 Clara OCR,http://directory.fs ...

  9. docker 下 alpine 镜像设置时区的有效办法

    在使用Docker的时候,由于很多基础linux镜像都比较大,alpine这个仅仅几兆的linux基础镜像受到了很多人喜欢,笔者也不例外,可是由于alpine中的一些配置及命令与常见的centos等系 ...

  10. setTimeout 的用法

    只有第二种和第三种是正确的用法. setTimeout(函数名, 延迟) setTimeout(show(), 1000); show() 是函数运行,这种传递方式真正传进去的是 show 函数的返回 ...