DOM基础之事件冒泡

最新推荐文章于 2023-05-04 20:58:57 发布
最新推荐文章于 2023-05-04 20:58:57 发布
阅读量121 收藏
点赞数 3
文章标签： 事件冒泡 dom 前端 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42763792/article/details/100052116
版权

首先我们要是到什么是事件冒泡

事件冒泡：作为父子时间的元素，当点击子元素时，会冒泡到父元素身上。
阻止事件冒泡的方法：
1.在标准浏览器下：`e.stopPropagation();`
2.在ie浏览器下：`e.cancelBubble = true;`

<style>
        #div1{
            width: 300px;
            height: 300px;
            background: #ff0000;
        }
        #div2{
            width: 200px;
            height: 200px;
            background: #0000ff;
        }
        
    </style>
</head>
<body>
    <div id="div1">
        111
        <div id="div2">
            222
        </div>
    </div>
    <script>
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2'); oDiv1.onclick = function(){
            console.log('div1');
        }
        oDiv2.onclick = function(e){
            e = e || window.event;
            console.log('div2');
            // 阻止事件冒泡  标准浏览器
            e.stopPropagation();
            // ie浏览器
            e.cancelBubble = true;
        }
</script>
&练习时长两年半
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM 基础事件
amuist_ting的博客
09-15 197
onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被
DOM事件对象
沉梦昂志
07-12 193
绑定事件的两种方式/DOM事件的级别 我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getE
DOM事件之事件冒泡
firstcode666的博客
11-29 362
什么是事件流？ 事件流----描述的是从页面中接受事件的顺序。 IE浏览器的是事件冒泡流 什么是事件冒泡呢？ 事件冒泡：指事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 例如： <div id="box"> <input type="button" value="按钮" id="btn"/> </div> 当点击了该按钮的时..
DOM事件-冒泡与捕获
jyn15159的博客
01-28 211
DOM事件-冒泡与捕获 事件执行3个阶段： 事件捕获 从根部节点（document对象）一层一层向文档内找，直到找到事件触发的那个节点，这个过程叫事件捕获 。 到达目标 找到事件触发的那个节点。 事件冒泡 从事件触发的那个节点，一层一层向文档外找，直到根节点（document对象）的过程叫事件冒泡。 事件默认是在冒泡阶段执行。用户体验好，让用户知道自己点的地方是正常的想法。 在冒泡阶段，如果父级节点也注册和用户触发行为一样的事件，这些事件函数会被执行。 父级节点注册了和用户行为一样的事件，用
自己封装的Switch Button（Vue组件，checkbox改装），同时解决父子组件的事件冒泡问题的新思路
xiecheng1995的博客
06-11 421
用一晚上的时间自己封装了一个Switch button组件，因为ElementUI里面那个是在是太难用了，尤其是其父组件也有点击事件的时候，解决冒泡问题真是让人头秃。。。 本组件用checkout button改编的，不具有点击事件，父元素点击时，可以切换是否checked。 本博客方案也为事件冒泡问题提供了一个解决方案，也就是说，尽量让父子组件只有一个有点击事件，要不然只能让子组件有点击事件，然后让子组件通过@click.stop方式禁止冒泡，即，父组件就不具有点击事件了。 这里我们希望点击子组件，父
DOM——事件捕获与事件冒泡
weixin_68160847的博客
01-10 417
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。
DOM事件流+阻止事件冒泡
最新发布
不畏的博客
05-04 454
记录一下。
DOM的冒泡机制
多看书少吃饭的博客
02-16 662
事件委托: 子元素的事件 让父元素来处理 委托的前提: 冒泡机制 注意: 应该判断 是指定的子元素们 触发的事件 才处理 使用场景: 以后如果需要 批量给子元素们添加事件监听, 则改为用父元素帮子元素事件事件监听
DOM-事件冒泡(Bubble)
qq_46665317的博客
08-15 504
事件冒泡什么是冒泡？一、怎么取消冒泡？二、案例分析1.全文代码2.重点部分总结 什么是冒泡？        如果我是一个小男生，非常喜欢班上的一位小女生，有一天我忍不住亲了她一口，然后被她揍了一顿，她回去告诉她爸爸，没一会小女孩的爸爸也气冲冲的找到我把我打一顿，晚上的饭桌上，爸爸把这个事情告诉了小女孩的爷爷，她爷爷连饭都还没有吃完就找到我把我打一顿，喲，这可划不来，我亲她一口被揍了三顿。所谓的冒泡指的就是事件的向上传导，当后代元素上的事
DOM基础教程之事件类型
09-03
【DOM基础教程之事件类型】是Web开发中的一个重要部分，它涉及到如何响应用户与网页的交互。DOM（Document Object Model）是HTML和XML文档的一种结构化表示，它允许程序和脚本动态更新、添加和删除元素，而事件则是...
js学习总结之dom2级事件基础知识详解
10-19
相比之下，`window.onload`事件会在所有资源加载完毕后触发，且只能绑定一次。jQuery中的`$(document).ready()`或简写`$(function() {})`与`DOMContentLoaded`事件等价，允许多次绑定。 DOM2级事件的另一个特点是，...
DOM事件探秘篇
08-31
1. DOM中的事件对象提供了如`type`（事件类型）、`target`（事件源元素）、`stopPropagation`（阻止事件冒泡）和`preventDefault`（阻止默认行为）等方法。`stopPropagation`防止事件继续向上层元素传播，`...
Js冒泡事件详解及阻止示例
10-26
JavaScript中的事件冒泡是DOM（文档对象模型）事件处理的核心机制之一，它描述的是事件从最深的节点开始，逐级向上层节点传播的过程。在上述示例中，当一个元素（例如`inner`）被点击，触发了其定义的事件（如`click...
深入分析js的冒泡事件
10-25
总结一下，JavaScript的冒泡事件是DOM事件传播的基础，它允许事件在嵌套的元素结构中逐级传递。`event.stopPropagation()`方法用于阻止事件的进一步冒泡，而`event.preventDefault()`方法则用来阻止事件的默认行为。...
BOM和DOM操作 - Day2 - 事件（注册事件、删除事件、DOM事件流等）
weixin_45663697的博客
04-27 151
1. 注册事件（绑定事件） 1.1 注册事件概述 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式 1.1.1 传统注册方式 利用 on 开头的事件 onclick <button onclick=“alert('hi~')”></button> btn.onclick = function() {} 特点： 注册事件的唯一性 // 唯一性： 当同一个按钮有两个或多个点击事件时，只会执行最后一个 <button>0
理解DOM事件流的三个阶段
weixin_34365635的博客
02-20 786
本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。在寒假深入学习JavaScript时，愈发觉得自己对DOM事件了解不够，遂打开我的《JavaScript高级程序设计》，翻到DOM事件那一章，开始第二次学习之旅。当然，DOM事件...
DOM 事件冒泡
u011927449的博客
05-18 270
1.什么是事件冒泡？ 　　事件冒泡就是从具体到不具体， 　　例如：当你给了一个button按钮一个点击事件，再给他的父级相同的事件，就会按照，button，body，document，window，继续向上冒泡。 2。什么是事件捕获？ 　　从不具体到具体，跟事件冒泡刚好相反。window document body button 。 　　例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
事件冒泡、事件委托和事件捕获
ToShy的博客
09-24 481
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。 事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。 事件委托依靠的就是事件冒泡和捕获的机制。 事件冒泡 一个很简单的例子，生活中，当你玩手机点击一个应用时，同时也代表你点击了手机屏幕。 网页中以下面的这个小例子来说明： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l
前端学习之DOM之事件与事件流（冒泡流和捕获流）
Dlili_yang的博客
10-20 3024
一直都在按照慕课网中的学习路径学习前端，今天学习到《DOM事件探秘》,地址在这里，这篇文章的内容都是从该视频中摘出来的 在此记录一些概念笔记： 事件：是文档或浏览器窗口中发生的，特定的交互瞬间。 一、理解事件流 事件流：描述的是从页面中接受事件的顺序 IE提出的是“事件冒泡流” Netscape提出的是“事件捕获流” 事件冒泡流：即事件最开始由最具体的元素（文档中嵌套

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值