js什么是事件冒泡并阻止事件冒泡

2023-10-27

事件冒泡

当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。

简单来说就是点击子级,子级的事件会从子级一级一级往上传递,绑定点击事件的元素都会被执行

案例
body代码:

<body>
    <div id="div">
        我是div
        <span id="s">我是span</span>
    </div>
</body>

css代码:

<style>
        #div {
            width: 200px;
            height: 200px;
            background: red;
        }

        #s {
            background: yellow;
        }
    </style>

js代码:

<script>
    // span点击事件
    s.onclick = function (event) {
        alert('我是span')
        // 阻止事件冒泡
        var event = event || window.event

        // w3c方法 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
        // event.stopPropagation();

        // ie方法 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
        // event.cancelBubble = true
    }
    // div点击事件
    div.onclick = function () {
        alert('我是div')
    }
    // body点击事件
    document.body.onclick = function () {
        alert('我是body')
    }
</script>

加油吧骚年!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js什么是事件冒泡并阻止事件冒泡 的相关文章

随机推荐

  • SVC分类经典Iris数据集

    今天做了一个用SVC分类经典Iris数据集的训练 在数据预处理上出了点奇怪的岔子 对原始数据中的string转到float这步一直不成功 转换函数没错 用的是load txt里面的converters 一直报错 但是被我机智 愚蠢 地手动处
  • Tomcat安装部署及多实例部署介绍

    Tomcat 一 Tomcat相关简介 二 Tomcat安装 三 多实例 一 Tomcat相关简介 1 Tomcat简介 Tomcat是由Apache软件基金会下属的Jakarta项目开发的一个servelet容器 按照Sun micros
  • word如何首页和目录不编辑页码

    按照下面的方法 从第二页或者是需要的地方设置页码即可 页码从任意页开始 1 将光标定位于需要开始编页码的页首位置 2 选择 插入 分隔符 打开 分隔符 对话框 在 分隔符类型 下单击选中 下一页 单选钮 3 选择 视图 页眉和页脚 并将光标
  • 作为程序员,该如何提升自己的编程水平?

    1500字3个角度说明如何提升编程水平 一 如果你是初学者 这几个方法给你 1 1 刻意练习 在编写代码之前 首先我们可以先了解这门编程语言的基本用法和常用的概念 编写基本的程序 一般来说敲代码是步骤是 明确需求 设计程序 编写代码 完善程
  • #35. 二叉树遍历(flist)(4月3日)

    include
  • Java基础篇:如何使用 break 退出循环

    在 Java 中 break 语句有 3 种作用 第一 你已经看到 在 switch 语句中 它被用来终止 一个语句序列 第二 它能被用来退出一个循环 第三 它能作为一种 先进 的goto 语句来使用 下面对最后 2 种用法进行解释 使用
  • 【Java】利用 PDF 多页模板生成 PDF 并导出

    一 所需要的依赖
  • 数据中心托管有什么好处?

    1 内置可扩展性 除了能够节省建设一个新的数据中心的资金 当涉及到可扩展的计算资源时 得益于数据中心托管服务的固有灵活性 还可以让用户节省更多的成本费用 托管服务提供商能够根据用户需求扩展或减少他们所需要的容量 这样 既有效利用了资源 还能
  • 使用eclipse创建一个图书管理系统(2)---------逻辑的实现

    就像使用C语言写代码一样 比如要用 C语言写一个小游戏的代码 我们的逻辑实现是在哪里实现的啊 是不是在一个test c源文件里面啊 没错 就是的 在之前的文章里 我说过我定义的Main函数就像C语言里的test c文件一样 所以 为了不打自
  • web安全之文件上传漏洞攻击与防范方法

    一 文件上传漏洞与WebShell的关系 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行 这里上传的文件可以是木马 病毒 恶意脚本或者WebShell等 这种攻击方式是最为直接和有效的 部分文件上传漏洞的利用技术门槛非常的低
  • HTTP 协议

    1 HTTP 介绍 2 HTTP 请求 和 响应 3 HTTP 请求方法 4 HTTP 状态码 5 HTTP 头信息 6 URL 和 URI 7 静态资源 和 动态资源 1 HTTP 介绍 HTTP协议 是 超文本传输协议 的缩写 是用于从
  • “该应用程序的数字签名无法验证......”

    该应用程序的数字签名无法验证 是否运行该应用程序 登录服务器后运行某模块时 总出现这个提示 且对话框点不动 解决 开始 控制面板 双击JAVA 打开JAVA面板 高级 安全 混合代码 沙箱代码与可信代码 安全验证 禁用验证 不推荐 图片见附
  • 【k8s故障处理篇】解决k8s集群中kubectl命令补全问题

    k8s故障处理篇 解决k8s集群中kubectl命令补全问题 一 查看k8s的版本 二 安装相关软件包 三 配置相关环境变量 四 测试tab键补齐命令 一 查看k8s的版本 查看当前k8s版本 当前环境的k8s版本为v1 16 2 本方法也
  • 解决网页不能粘贴的问题

    最近要完成老师布置的英语作业 在网站上写作文并提交 但是老师设置了 不能复制粘贴 本来在word文档里写完打好草稿了 现在却只能重新打一遍 于是我尝试解决这个问题 看看能不能粘贴上去 通过查阅资料 了解了网页的基本知识 于是探索出了如下步骤
  • 在React项目中实现调用摄像头拍照的功能

    文章目录 前言 一 如何调用摄像头 二 操作步骤 1 准备dom元素 2 添加打开和关闭摄像头的事件 3 获取图片 base64格式 三 demo 总结 前言 在日常开发中可能会遇到需要调用摄像头拍照的功能 下面为大家讲解一下在react项
  • Qt如何设置界面透明

    1 设置主窗体透明 但是窗体上的控件不透明 setAttribute Qt WA TranslucentBackground true void paintEvent QPaintEvent event QPainter painter t
  • Go入门:切片 slice,引用类型

    Go 语言中 slice表示一个拥有相同类型元素的可变长度序列 slice通常被写为 T 其中元素的类型都是T 它看上去就像没有长度的数组类型 数组和slice其实是紧密关联的 var fslice int 和声明array一样 只是少了长
  • mac版Idea快捷键

    option command L 格式化 option command M 提取方法 option command T 代码块加try catch fn shift f6 修改变量 方法名 shift command 折叠代码 shift
  • 从Java到Go:使用Go语言和Gin Web框架构建博客系统

    目录 1 Go语言基本介绍 2 从Java到Go 语法和特性对比 2 1 变量和类型 2 2 控制结构
  • js什么是事件冒泡并阻止事件冒泡

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