所谓的javascript冒泡与捕获不是数据结构中的冒泡算法,而是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌套子标签均有相同的事件时,那一个会先被触发!

目前流行的浏览器中冒泡模式均是由内至外,即由子至父的处理流程,而捕获模块均是由外向内,即由父至子的处理流程;

而捕捉模式与冒泡方式刚才相反!

而浏览器中为一个标签附加响应事件可以有两种方式,一种是直接在标签上写事件属性的方式,而另一种是使用js为标签增加事件,下面以onclick为例说明一下两种方式的附加方式:

    1. 直接在标签上写相应的属性:<div id="eventExample" onclick="alert('attribute event  is clicked');">
    2. 通过js的方式附加: var eventObj = document.getElementById("eventExample"); 
      ie浏览器器下使用以下代码:
            eventObj.attachEvent("onclick",funName); //这里我们其实可以看到ie由于只有两个参数,因此ie只支持一种方式的事件处理,即冒泡方式;
      其它浏览器(firefox,chrome)下使用以下代码:
            eventObj.addEventListener("click",funName,true/false);
            其中第1个参数为事件名称,第二个参数是响应该事件的处理方法,第三个参数如果有true则是捕捉模块,false则是冒泡方式;
    3. 标签上的属性事件(直接写在标签上的事件)与通过js创建的事件的执行优先级:
           如果在同一个标签上存在属性事件及js创建的事件,则无论js创建的冒泡或捕捉方式的事件均是属性事件先执行,即第2条例子中alert('attribute event is clicked')先执行;
    4. 下面的html代码中:
        <html>
        <head>  
        </head>
        <body>
          <div id="parentDiv">
             parent 
             <div id="childDiv" onclick="alert('child');">child</div>
          </div>
          
          <script>
            var child1 =  document.getElementById("childDiv");
            var parent =  document.getElementById("parentDiv");
            
            if(child1.attachEvent) {  
               child1.attachEvent("onclick",childevent);
               parent.attachEvent("onclick",parentevent);
            }else{
               child1.addEventListener("click",childevent,false);
               parent.addEventListener("click",parentevent,true);
            }
          
            function childevent(){
               alert('child event');
            }

      function parentevent(){
               alert('parent event');
            }
            
          </script>
        </body>
      </html>
              上面代码中,在ie浏览器中,在页面上单击child几个字,提示出现的顺序是:child-->child event-->parent event;即使用冒泡方式响应click事件;而在firefox或chrome等浏览器中,由于 parent.addEventListener("click",parentevent,true),最后一个参数为true,即为捕捉方式;单击child几个字后,提示出现的顺序是:parent event-->child-->child event;
              而如果将parent.addEventListener("click",parentevent,false),最后一个参数为false,即为冒泡方式时,则单击child几个字,提示出现的顺序为:child-->child event-->parent event.

javascript 冒泡与捕获的原理及操作实例的更多相关文章

  1. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

  2. 生动详细解释javascript的冒泡和捕获，包懂包会(转)

    前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在 ...

  3. 【转】JavaScript 事件顺序：冒泡和捕获

    补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又 ...

  4. 生动详细解释javascript的冒泡和捕获

    原文:Event order 翻译:hh54188的博客 前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多 ...

  5. JavaScript事件捕获冒泡与捕获

    事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是 ...

  6. 2014年辛星解读Javascript之DOM之冒泡和捕获

    上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开 ...

  7. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  8. JavaScript事件：事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  9. Javascript中的事件冒泡与捕获

    事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...

随机推荐

  1. Spring Boot中验证码实现kaptcha

    要生成验证码网上的方案比较多,基本是基于两大类:1为自定义生成,操作用Image类,2为kaptcha生成,有模糊算法. 当然也可以直接交由前端进行处理 1.基于kaptcha 首先不要怀疑的是报名是 ...

  2. Spring中实现自定义事件

    原理: 通过扩展ApplicationEvent,创建一个事件类CustomEvent.这个类必须定义一个默认的构造函数,它应该从ApplicationEvent类中继承的构造函数. 一旦定义事件类, ...

  3. 在SUSE12中使用 Machinery 进行高级系统管理

    简单介绍 在 SUSE Linux Enterprise 12 中.SUSE 如今推出了面向系统管理员的 Machinery.作为其高级系统管理模块的一部分.Machinery 是适用于 Linux ...

  4. Rust 1.7.0 匹配器 match 的简介和使用

    使用过正則表達式的人应该都知道 matcher ,通过 matcher 匹配器运算正則表達式,完毕一系列的匹配规则. 在Rust 中 没有 switch 语句.matcher 就是 switch 的一 ...

  5. Nginx在Linux下的安装部署

    Nginx简单介绍 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 server,也是一个 IMAP/POP3/SMTP server.Nginx作为 ...

  6. 看懂JSP声明的格式。。。

    在WebRoot下新建test3.jsp 改动body内容: <%! int a = 3; %>     <% int b = 3; %>     <%= a--  %& ...

  7. C# 性能优化 之 秒表 Stopwatch。 Dapper一个和petapoco差不多的轻量级ORM框架

    Sweet小马 小马同学的编程日记. C# 性能优化 之 秒表 Stopwatch. 生词解释:Diagnostics[,daɪəg'nɑstɪks] n.诊断学 using System.Diagn ...

  8. Java 中 泛型的限定

         泛型 一般 出如今集合中,迭代器中 也会出现!      泛型 是为了 提高代码的 安全性. 泛型 确保数据类型的唯一性. 在我们经常使用的容器中.  越是 单一 约优点理啊!       ...

  9. IOS开发之----常用的基本GDB命令【转】

    原文地址:http://blog.sina.com.cn/s/blog_71715bf801016d2y.html gdb不是万能的,可是没有gdb却是万万不能的.这里给大家简单介绍下iOS开发中最基 ...

  10. Responsive Nav

    引入文件 <!-- 引入这些文件至 <head> 中 --> <link rel="stylesheet" href="responsive ...