事件冒泡和事件捕获案例

最新推荐文章于 2024-03-17 22:23:15 发布
最新推荐文章于 2024-03-17 22:23:15 发布
阅读量462 收藏
点赞数
分类专栏： 事件冒泡和捕获
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/89319251
版权

冒泡

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        /* #obj1{
           background: pink; 
        } */
        #obj2{
            background: saddlebrown; 
        }
        #obj3{
            background: darkblue; 
        }
    </style>
</head>
<body>
    <div id="obj1">
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">world</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        var obj3=document.getElementById('obj3');
        obj1.addEventListener('click',function(){
            alert('最外层的点击');
        },false);
        obj2.addEventListener('click',function(){
            alert('HELLO 的点击');
        })
        obj3.addEventListener('click',function(){
            alert('WORLD 的点击');
        })
    </script>
</body>
</html>

事件捕获案例

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
    <style>
        html,body{
            background: bisque;
        }
    #obj2{
        background: salmon;
    }
    #obj3{
        background: skyblue;
    }
    </style>
</head>
<body>
    <div id="obj1">
        <h5 id="obj2">HELLO</h5>
        <h5 id="obj3">WORLD</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        var obj3=document.getElementById('obj3');
        obj1.addEventListener('click',function(){
            alert('最外层的点击');
        },true);
        obj2.addEventListener('click',function(){
            alert('HELLO 的点击');
        });
        obj3.addEventListener('click',function(){
            alert('WORLD 的点击');
        });
    </script>
</body>
</html>
Fade Away
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS冒泡事件与事件捕获实例详解
11-26
本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下： 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> [removed] [removed] = function(){ ...
js事件委托利用
01-08
事件委托是什么呢？事件委托在实际编写代码中又有什么优势呢？ 事件委托的原理是事件冒泡，最...事件冒泡的小案例 html代码部分，并且添加一点默认样式 爷爷节点 父节点 子节点 页面呈现效果 js代码部分
事件冒泡和捕获
weixin_58155690的博客
07-17 6056
事件冒泡和捕获
解释什么是事件冒泡和事件捕获。
最新发布
Layla_c的博客
03-17 1173
与事件捕获相反，事件冒泡是从目标元素开始，然后逐级向上冒泡到最外层容器的过程。也就是说，首先触发目标元素上的事件处理器，然后依次触发其父元素、祖父元素等上的事件处理器，最后到达最外层的容器。需要注意的是，虽然事件冒泡和事件捕获是两个不同的阶段，但在一个事件处理过程中，这两个阶段都会发生，只是默认情况下事件处理器只在冒泡阶段被触发。事件冒泡和事件捕获是JavaScript中事件流（Event Flow）的两个主要阶段，用于描述当一个事件发生时，事件处理器（或事件监听器）如何被触发和执行的顺序。
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 8700
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
JS事件冒泡实例
u010025127的博客
06-25 690
近段时间，在开发中遇到需要自定义选择下拉框，在自己尝试实现下拉选择框时，就遇到今天要探讨的js冒泡问题。于是，针对这个问题，本文结合选择下拉框的实现为例，来探讨一下。 首先看一下什么是事件冒泡 事件冒泡 ：dom树中的一个元素接收到事件的时候，会将事件传递给他的父级元素，直至window。先来看一下简单的例子： <div id="div1"> 父节点 <div id="div2"> ...
js事件（事件冒泡与事件捕获）
weixin_30381317的博客
01-22 198
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 <div id='aa' click='po'> <p id='bb' click='on'>点击</p> </div> 　　上面两个点击事件如果点击的时候，到底谁会被先触发呢，为了解决这个问题微软和网景提出了两...
js DOM的事件常见操作实例详解
10-15
在JavaScript中，DOM事件处理涉及三个关键要素：事件源、事件和事件处理程序。 1. 事件源（Event Target）：事件源是指触发事件的HTML元素，例如用户点击的按钮或者鼠标悬停的图像。在JavaScript中，可以通过`...
如何让div span等元素能响应键盘事件操作指南
09-05
描述中提到的场景是开发者需要在一个可编辑的`div`内嵌套一个可编辑的`span`，并且希望`span`能够捕获并处理键盘事件。 在Web开发中，`div`和`span`是常见的布局和内容组织元素。默认情况下，这些元素并不直接接收...
javascript事件监听与事件委托实例详解
12-29
本文实例讲述了javascript事件监听与事件委托。...事件委托需要用到事件的冒泡，冒泡就是事件发生时，上层会一层一层的接收这个事件。 如下页面结构： <body> <button>按钮</bu
事件冒泡和事件捕获
Bliss_妍的博客
08-19 1177
1. 事件冒泡： 当一个元素被触发之后，会将事件一层一层由里向外一直传递到window对象。 2. 事件捕获：与事件冒泡相反，由外向里 3. DOM事件流：事件流包括三个阶段，事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截获事件提供了机会。然后是实际的目标接收了事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。 两种方式来阻止事件冒泡： 方式一：event.stopPropagation(); 方式二：return false; 但是这两种方式是有区别的。return fal
Vue 事件、事件冒泡和事件捕获
江西第一深情的博客
11-13 3518
vue 事件、事件冒泡、事件捕获和终止事件冒泡
一个例子弄懂事件冒泡和事件捕获
想搞全栈的前端
10-28 792
先看一张图 先看这张图，然后我们用例子来理解。 事件冒泡 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。 事件冒泡例子 层级关系：body>div>p 给body，div,p分别绑定点击事件，console.log()出body,div,p; <!DOCTY...
事件捕获（快速理解）
bxz0729的博客
11-23 6726
先看一个例子 点击box2结果如下： 是不是很疑惑，自己明明点击的是box2，打印的数据却是“点击box1 点击box2”？？？？其实这就是事件捕获。 事件捕获 从最不具体的元素到最具体的元素（由外向内） 在捕获的过程中，最外层（根）元素的事件先被触发，然后依次向内执行，直到触发最里面的元素（事件源） 事件监听：addEventListener('事件', function(){ }, flase/true)； 用于监听某个事件，当监听到这个事件时去执行某个方法 addEvent..
C++实战（三）冒泡排序+两个案例
Pinospot的博客
08-17 1386
练习案例1：五只小猪称体重 案例描述：一组数据中记录了五只小猪的体重，找出并打印最重的小猪
《事件冒泡和事件捕获》
杨晓风 迷迭香的记忆
02-13 443
为了解决页面中事件流（事件发生顺序）的问题，微软和网景公司分别提出事件冒泡和事件捕获的解决方式。 一、事件捕获 捕获型事件（event capturing）：事件从最不精确目标对象开始触发，然后到最精确 二、事件冒泡 冒泡型事件（event bubbling）：事件从最特定的事件目标对象到最不特定的事件目标对象（document对象）触发 三、事件捕获和冒泡过程图...
事件冒泡与事件捕获，附实例
徐同保的专栏
08-29 1949
简单介绍一下事件冒泡和事件捕获
一个很经典的事件冒泡的例子
hbzyaxiu520的专栏
08-23 965
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Bubble in JavaScript DOM div * {display:block; margin:4px; padding:4px; border:1px solid white;} textarea {width:20em; heig
事件冒泡和事件捕获的区别
09-27
事件冒泡和事件捕获是JavaScript中处理事件的两种不同的机制。事件冒泡是指事件从目标元素开始，逐级向上冒泡到父元素，直到冒泡到文档根节点。而事件捕获则是相反的过程，事件从文档根节点开始，逐级向下捕获到目标元素。 在事件冒泡阶段，事件会从目标元素开始冒泡到父元素，触发父元素绑定的同类型事件监听器。这意味着，如果一个子元素和一个父元素都绑定了相同类型的事件监听器，当点击子元素时，子元素的事件处理函数会先执行，然后父元素的事件处理函数会执行。 而在事件捕获阶段，事件会从文档根节点开始捕获到目标元素，触发捕获阶段绑定的同类型事件监听器。这个阶段的监听器会在冒泡阶段之前执行。 通过事件监听的方式，我们可以在addEventListener方法中设置第三个参数为true来绑定捕获事件，设置为false则是绑定冒泡事件。 综上所述，事件冒泡和事件捕获的区别在于事件触发的顺序不同，冒泡是由内向外，捕获是由外向内。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值