事件冒泡及阻止

当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现，但事件确实传递了。

事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。

实例

当点击id为i3的<div>时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。

<!DOCTYPE html>

<html>

<head>

    <title>JS事件冒泡及阻止</title>

</head>

<style type="text/css">

    div{

        display: flex;

        justify-content: center;

        align-items: center;

    }

</style>

<body>

    <div id="i1" style="height: 150px;width: 150px;background: red;">

        <div id="i2" style="height: 100px;width: 100px;background: green;">

            <div id="i3" style="height: 50px;width: 50px;background: blue;"></div>

        </div>

    </div>

</body>

<script type="text/javascript">

    document.getElementById("i1").addEventListener('click',(e) => {

        alert(1);

    })

    document.getElementById("i2").addEventListener('click',(e) => {

        alert(2);

    })

    document.getElementById("i3").addEventListener('click',(e) => {

        alert(3);

    })

</script>

</html>

应用场景

例如我们有10个<li>标签，每个标签有一个uid作为判断用户点击的区别，使用冒泡就不需要为每个<li>绑定点击事件，可以称为事件委托

<!DOCTYPE html>

<html>

<head>

    <title>JS事件冒泡及阻止</title>

</head>

<style type="text/css">

    li{

        cursor: pointer;

    }

</style>

<body>

    <ul id="u1">

        <li uid="0">0</li>

        <li uid="1">1</li>

        <li uid="2">2</li>

        <li uid="3">3</li>

        <li uid="4">4</li>

        <li uid="5">5</li>

        <li uid="6">6</li>

        <li uid="7">7</li>

        <li uid="8">8</li>

        <li uid="9">9</li>

    </ul>

</body>

<script type="text/javascript">

    document.getElementById("u1").addEventListener('click',(e) => {

        alert(e.srcElement.getAttribute('uid'));

    })

</script>

</html>

阻止冒泡

有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble = true;。

注意

  • 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。
  • 事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。
  • 阻止冒泡并不能阻止对象默认行为，例如submit按钮被点击后会提交表单数据，需使用e.preventDefault();阻止默认行为，IE则是window.event.returnValue == false;

JS事件冒泡及阻止的更多相关文章

  1. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  2. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  3. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  4. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  5. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  6. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  7. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  8. jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

随机推荐

  1. Linux IO多路复用

    监听文件描述符的状态来进行相应的读写操作,3个函数: 123 selectpollepoll 123456789 int (int nfds, fd_set *readfds, fd_set *wri ...

  2. 记一次MySQL表分区操作

    最近一次日常迭代中,业务线需要对一张大表进行联合查询,查询性能可想而知,测试过程中服务接口直接响应超时,导致服务不可用,最后临时对该表进行分区操作,暂时缓解性能问题.由于是第一次操作表分区,姑且记录一 ...

  3. Leetcode 239题 滑动窗口最大值(Sliding Window Maximum) Java语言求解

    题目链接 https://leetcode-cn.com/problems/sliding-window-maximum/ 题目内容 给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧 ...

  4. Channel Estimation for High Speed Wireless Systems using Gaussian Particle Filter and Auxiliary Particle Filter

    目录 论文来源 摘要 基本概念 1.时变信道 2.粒子滤波 3.高斯粒子滤波 4.辅助粒子滤波 比较 借鉴之处 论文来源 International Conference on Communicati ...

  5. SpringBoot2整合Redis缓存

    遵循SpringBoot三板斧 第一步加依赖 <!-- Redis --> <dependency> <groupId>org.springframework.bo ...

  6. 丰富图文详解B-树原理，从此面试再也不慌

    本文始发于个人公众号:TechFlow,原创不易,求个关注 本篇原计划在上周五发布,由于太过硬核所以才拖到了这周五.我相信大家应该能从标题当中体会到这个硬核. 周五的专题是大数据和分布式,我最初的打算 ...

  7. html/css系列 BFC

    本文详情:https://www.cnblogs.com/chen-... 第一种 BFC中的盒子对齐 <div class="container"> <div ...

  8. 【30分钟学完】canvas动画|游戏基础(6)：坐标旋转探究

    前言 本篇主要讲坐标旋转及其应用,这是编程动画必不可少的技术. 阅读本篇前请先打好前面的基础. 本人能力有限,欢迎牛人共同讨论,批评指正. 坐标旋转 模拟场景:已知一个中心点(centerX,cent ...

  9. 把.net Core 项目迁移到VS2019 for MAC

    VS2019 for MAC已经发布很长时间了,本以为项目移过去很麻烦,一直没有动作,最近呆家里快发霉了,决定研究研究,没想到一句代码都不需要动,直接完功,这下可以生产了.同学们可以放心整了. 本次平 ...

  10. PAT-字符串处理-B 1002 写出这个数 (20分)

    题目: 思路: 先用字符串数组存储输入数字,然后依据num[i]-'0'对输入数字求和.然后对求和后的数字,进行分割,存储到数组中,然后遍历数组,依据存储汉语拼音的字符串二维数组进行输出 注意点: 注 ...