js中事件三阶段

先贴代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>冒泡</title>

    <style>

        #a{

            width: 300px;

            height:300px;

            background-color: cadetblue;

        }

        #b{

            width: 200px;

            height:200px;

            background-color: chocolate;

        }

        #c{

            width: 100px;

            height:100px;

            background-color: coral;

        }

    </style>

</head>

<body>

<div id="a">

    <div id="b">

        <div id="c"></div>

    </div>

</div>

<script src="mainx.js"></script>

</body>

</html>
/**

 * Created by Administrator on 2016/8/10.

 */

(function () {

    var a=document.getElementById("a");

    var b=document.getElementById("b");

    var c=document.getElementById("c");

    a.addEventListener("click",function () {

       console.log("a is clicked");

    });

    b.addEventListener("click",function () {

       console.log("b is clicked");

    });

    c.addEventListener("click",function () {

       console.log("c is clicked");

    });

})();

运行结果如图：

当点击最小块c的时候，a和b也会被点击。也就导致了所谓的冒泡。

当js代码修改为

/**

 * Created by Administrator on 2016/8/10.

 */

(function () {

    var a = document.getElementById("a");

    var b = document.getElementById("b");

    var c = document.getElementById("c");

    a.addEventListener("click", function () {

        console.log("a is clicked");

    });

    b.addEventListener("click", function () {

        console.log("b is clicked");

    });

    c.addEventListener("click", function (event) {

        console.log("c is clicked");

        event.stopPropagation();

    });

})();

结果为：

当点击c后，只有c被点击

stopPropagation()方法会阻止冒泡行为。

当代码再次修改为：

/**

 * Created by Administrator on 2016/8/10.

 */

(function () {

    var a = document.getElementById("a");

    var b = document.getElementById("b");

    var c = document.getElementById("c");

    a.addEventListener("click", function () {

        console.log("a is clicked");

    });

    b.addEventListener("click", function () {

        console.log("b is clicked");

    });

    c.addEventListener("click", function (event) {

        console.log("c is clicked");

        event.stopPropagation();

    });

    c.addEventListener("click",function () {

       console.log("c1 is clicked");

    });

})();

结果为：

当点击C的时候，两个事件都会触发。

在修改代码为：

/**

 * Created by Administrator on 2016/8/10.

 */

(function () {

    var a = document.getElementById("a");

    var b = document.getElementById("b");

    var c = document.getElementById("c");

    a.addEventListener("click", function () {

        console.log("a is clicked");

    });

    b.addEventListener("click", function () {

        console.log("b is clicked");

    });

    c.addEventListener("click", function (event) {

        console.log("c is clicked");

        event.stopPropagation();

        event.stopImmediatePropagation();

    });

    c.addEventListener("click", function (event) {

        console.log("c1 is clicked");

    });

})();

结果为：

又变为只触发一个事件了。

stopImmediatePropagation()方法，只阻止父类，不阻止兄弟事件。（这里写错了，他也阻止了兄弟事件！！！！！！！！！！！！！！！！！！！！！！！！（剁手））

冒泡告一段落

开始讲三个阶段：

事件的三个阶段：捕获，目标，冒泡。

捕获阶段：从外到内，监听中设置为true,子类事件不产生

目标阶段：点击的目标

冒泡阶段：从内到外

先贴代码：

js

执行结果为：

执行顺序如图：先捕获，后目标，在冒泡。也可理解为，从外到内，在从内到外。

另外，可以用event.eventPhase去测试是什么阶段，

捕获阶段，返回值为1

目标阶段，返回值为2

冒泡阶段，返回值为3

自己的理解：

　　用法，还没用到，以后补充(⊙﹏⊙)b；

　　阻止冒泡的好处，防止子元素的父类元素被点击而触发子类事件。

　　设置捕获的好处（设置，末尾true属性），可以是冒泡事件反向执行。

补充一点2016-10-28 11:08:55（感谢  "潘多拉之欣"  的提醒）

关于stopImmediatePropagation和stopPropagation的区别

网上大神的解释

myGitgub https://github.com/mfx55 希望我的博客能帮到你

js中事件三阶段的更多相关文章

  1. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  2. [js]js中事件的3要素

    js中事件的3要素 事件源 事件 事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta ...

  3. 研究分析JS中的三种逻辑语句

    JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10;  ...

  4. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  5. JS中事件代理与委托

    在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...

  6. JS中 事件冒泡与事件捕获

    [JS中的事件流]  1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点:   >>>什么情况下会产生事件冒泡 ① D ...

  7. 对于js中事件冒泡的理解分析

    一. 事件 事件的三个阶段:事件捕获 -> 事件目标 -> 事件冒泡 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象: 目标阶段:到达目标事件位置(事发地) ...

  8. 对JS中事件委托的理解

    什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使 ...

  9. js中事件冒泡和事件捕获

    什么时候存在这种问题? 当一个行为触发了多个对象的事件时.   <body>   <div class="fa">     <div class=&q ...

随机推荐

  1. 【HDOJ1051】【排序+LIS】【贪心】

    http://acm.hdu.edu.cn/showproblem.php?pid=1051 Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)  ...

  2. hdu2594 Simpsons’ Hidden Talents LCS--扩展KMP

    Homer: Marge, I just figured out a way to discover some of the talents we weren’t aware we had.Marge ...

  3. static关键字的使用（有个深刻领悟）

    没有实例化对象的时候进行可以调用static 属性  static方法 (用类名去调用) 非static定义的方法可以调用static的属性或方法. static定义的方法不能调用非static的方法 ...

  4. plsql快速入门

    汉化plsql方法: 本来想直接使用英文版的,但是太多专业名词看不懂,只好先汉化熟悉一下先. 安装好plsq后,百度下载plsql汉化包 执行汉化包里面的安装程序,安装目标路径选择plsql的安装路径 ...

  5. linux kernel笔记

    文章目录 关于linux内核中的__attribute__关键字 Linux kernel启动参数 gdt / ldt PCB 关于linux内核中的__attribute__关键字 part I: ...

  6. 在Android上运行Java和C程序

    在linux上运行java程序,直接用javac编译,再用java启动虚拟机运行就行了.但是在Android上,由于虚拟机和pc端的不同,所以操作方法也是不一样的.下面介绍Android上运行Hell ...

  7. ORM 之常用重点 ******

    总体介绍orm>>点我 单表查询api汇总  如 distinc(),order_by()  id__gt=1  id__inrange=[ 1,3 ]  左右都包含     设置logg ...

  8. 现在的企业用到的Java开发主流框架有哪些

    虽然Java一直被唱衰,但是直到现在Java软件开发也坚持霸主地位不动摇.毫无疑问,Java是目前最热门的编程语言之一.随着Java面向对象语言的流行以及多层架构应用的出现,使得应用程序的可复用性得到 ...

  9. benthos v1 的一些新功能

    主要从视频文件截取,暂时github 上还没有很全的相关文档 v1目标 config lint processor error 处理 subprocess processor awk processo ...

  10. ksonnet 一个简化编写以及部署kubernetes的工具

    ksonnet 是一个基于jsonnet的快速简化kubernetes yaml 配置的工具,可以实现配置的复用 同时也包含一个registry 的概念,可以实现可复用组件的分发,同时支持helm 环 ...