事件冒泡和传播

wenshi11019 发布于2019-08-23 10:59 / 2004人阅读

摘要：事件冒泡和传播举栗子事件输出事件有两种，一种为事件传播，一种是事件冒泡事件传播和事件冒泡这还要从遥远的荒诞说起，两家网景和，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候，使用事件冒泡。

事件冒泡和传播
举栗子
事件输出hello world
事件有两种，一种为事件传播，一种是事件冒泡

事件传播和事件冒泡

这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候，ie使用事件冒泡。（两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window

DOM为一个完整的树

使用事件传播输出hello world

html如下

 

  
      
      
    Hello world
  
  
    
        
            点击这里

css如下

* {
    margin:0;
    padding:0;
    border:0;
}

#div1 {
    width:300px;
    height:300px;
    background:#c7e0d9;
    position:relative;
}

#div2 {
    width:100px;
    height:100px;
    background:#8ac3d8;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    text-align:center;
    line-height:100px;
}

显示的效果如下

下面书写js

冒泡

先使用冒泡

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener("click", () => {
    alert("hello world! 你点击的是外框！");
}, false);
div2.addEventListener("click", () => {
    alert("hello world! 你点击的是内框");
}, false);
div3.addEventListener("click", () => {
    alert("hello world! 你点击的是文字");
}, false);

当为false的时候为冒泡。否则为事件传播

冒泡为上，事件传播为下，事件传播优于事件冒泡

可以明确的知道，此时为false为冒泡，即全部向上传播，这个比较简单不在阐述

阻止进一步冒泡

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener("click", () => {
    alert("hello world! 你点击的是外框！");
}, false);
div2.addEventListener("click", () => {
    alert("hello world! 你点击的是内框");
    event.stopPropagation();    // 阻止该事件进一步传播
}, false);
div3.addEventListener("click", () => {
    alert("hello world! 你点击的是文字");
}, false);

js如上，在div2内部使用event.stopPropagation()阻止进一步冒泡
结果如下

可以看到明显的被阻挡

传播

传播方向更冒泡相反，为向下，且传播优先于冒泡
并且事件先进行向上传，直到遇到设置为冒泡的元素的时候，停止向上传，开始进行从上到下的捕获，先最外层捕获，然后逐层捕获，直到完成。

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener("click", () => {
    alert("hello world! 你点击的是外框！");
}, true);
div2.addEventListener("click", () => {
    alert("hello world! 你点击的是内框");
}, true);
div3.addEventListener("click", () => {
    alert("hello world! 你点击的是文字");
}, true);

传播优先于冒泡

js如下

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener("click", () => {
    alert("hello world! 你点击的是外框！");
}, false);
div2.addEventListener("click", () => {
    alert("hello world! 你点击的是内框");
}, true);
div3.addEventListener("click", () => {
    alert("hello world! 你点击的是文字");
}, true);

演示

ps: 最近在写gitchat 有点慢

GPU云服务器云服务器阻止事件传播冒泡事件事件冒泡事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96888.html

你不知道的javascript事件

摘要：然而和分别提出了完全相反的的概念事件冒泡和事件捕获。所有的节点中包含了这两个方法，它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段事件冒泡阶段。事件流描述的是从页面中接受事件的顺序。然而ie和netscape分别提出了完全相反的的概念：事件冒泡和事件捕获。下面就说说这两种事件流：事件冒泡事件冒泡，就是说...

imtianx 2019-08-21 17:40 评论0 收藏0
你不知道的javascript事件

摘要：然而和分别提出了完全相反的的概念事件冒泡和事件捕获。所有的节点中包含了这两个方法，它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段事件冒泡阶段。事件流描述的是从页面中接受事件的顺序。然而ie和netscape分别提出了完全相反的的概念：事件冒泡和事件捕获。下面就说说这两种事件流：事件冒泡事件冒泡，就是说...

marek 2019-08-01 18:00 评论0 收藏0
浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

摘要：目标阶段真正点击的元素的事件发生了两次，因为在上面的代码中，既在捕获阶段绑定了事件，又在冒泡阶段绑定了事件，所以发生了两次。所以很明显用直接绑定的事件发生在了冒泡阶段。如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。特别少...

mylxsw 2019-08-21 10:38 评论0 收藏0
JavaScript捕获和冒泡探讨

摘要：上个星期在微博中一个关于捕获和冒泡代码的讨论，可能没有动手实现一篇的人无法给出确定的答案。目标阶段事件对象到达其事件目标。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。上个星期在微博中一个关于javascript捕获和冒泡代码的讨论，可能没有动手实现一篇的人无法给出确定的答案。这里再来回顾一下之前的三条微博。事件的执行顺序 JavaScript冒泡和捕获考察题目看图回答问题...

caikeal 2019-08-19 18:09 评论0 收藏0
JS专题之事件模型

摘要：三事件流规定事件包括三个阶段，事件捕获，处于目标阶段事件冒泡。一起来看添加新增加的，点击发现没有反应，说明事件没有绑定进去，但是我们也并不想，每增加一个新元素，就为这个新元素绑定事件，重复低效率的工作应当避免去做。本文共 1960 字，读完只需 8 分钟事件用户与网页交互是通过事件实现的，事件刚开始是作为分担服务器负载的一个手段，起初没有统一的规范，直到 DOM2 级，网景和 I...

W4n9Hu1 2019-08-26 13:24 评论0 收藏0