事件冒泡及阻止

当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到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. 使用document.domain+iframe跨域实例

    首先我们假设主页面地址为:http://www.js8.in/mywork/crossdomain/index.html,我们要加载的内容是位于work.2fool.cn域名下的helloworld. ...

  2. Apache JMeter--1基础介绍

    一.JMeter 介绍 近期公司要做jmeter调研,将性能测试推广到全部测试组,便一边学习一边做记录. Apache JMeter是100%纯JAVA桌面应用程序,是一款优秀的开源性能测试工具,被设 ...

  3. 杂记：OSX 安装openssl

    因为工作中要用到openssl中提供的MD5.SHA等摘要算法,通过brew install openssl安装的openssl在C文件中找不到相应的头文件.按照网上的教程各种修改之后还是找不到相应的 ...

  4. 点击穿透bug · Jaywii

    微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的 ...

  5. 安卓注解处理器-processor

    最近在学习安卓开源框架发现,很多的开源框架都使用到了注解处理器,例如EventBus3.0.本文通过一个简单的Demo来介绍如何使用注解处理器.Demo链接为https://github.com/cu ...

  6. 代码演示C#各版本新功能

    代码演示C#各版本新功能 C#各版本新功能其实都能在官网搜到,但很少有人整理在一起,并通过非常简短的代码将每个新特性演示出来. 代码演示C#各版本新功能 C# 2.0版 - 2005 泛型 分部类型 ...

  7. 解决WebMvcConfigurer下的addViewControllers无法找到制定页面

    解决WebMvcConfigurer下的addViewControllers无法找到制定页面 这种都已经配置了拦截跳转,但无效的原因是,没有加载thymeleaf依赖 <dependency&g ...

  8. JS面试准备二

    1.常用的字符串方法 1. indexOf:查找字符串某一项的初始位置2. slice:截取字符串(包含起始位置,不包含结束位置) 不会根据参数大小,交换参数位置 如果出现-1按倒数第一个数,如果出现 ...

  9. C++ 命令行窗口打印二叉树（图形）

    写这个程序的目的是学习数据结构的时候方便调试,学习起来也比较直观. 这个是我测试SplayTree时候的gif STEP 1 新建一个头文件,命名为DrawATree.hh, 将以下内容复制进去 #i ...

  10. leetcode 249 250 set和map的简单用法

    leetcode249,利用了STL中的set class Solution { public: vector<int> intersection(vector<int>&am ...