事件的冒泡传播

最新推荐文章于 2023-08-25 16:15:59 发布
最新推荐文章于 2023-08-25 16:15:59 发布
阅读量102 收藏
点赞数
原文链接：https://juejin.im/post/5c74edebe51d4519397cbe28
版权 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width:300px;
            height:300px;
            margin:100px auto;
            background: red;
        }
        #inner{
            width:200px;
            height:200px;
            margin: auto;
            background: yellowgreen;
        }
        #center{
            width:100px;
            height:100px;
            background: pink;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="center">

        </div>
    </div>
</div>
<script>
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");
    var center = document.getElementById("center");
    outer.onclick = function () {
        console.log("outer")
    }
    inner.onclick = function () {
        console.log("inner")
    }
    center.onclick = function (e) {
        e = e || window.event;
        // 阻止事件的默认行为
        e.preventDefault = e.preventDefault || function () {
            e.returnValue = false;
        }
        // 阻止事件的冒泡传播
        e.stopPropagation = e.stopPropagation || function () {
            e.cancelBubble=true;
        }
        e.stopPropagation();
        console.log("center")
    }
    // 事件冒泡传播： 给当前元素的子孙元素的事件行为绑定方法，当触发子孙元素身上的事件时，当前元素对应的事件行为也会随着触发；这种事件从内向外传播执行的方式就是事件冒泡传播；

    // 阻止事件的冒泡传播；  e.stopPropagation();

    // onmouseover   onmouseout
    // onmouseenter  onmouseleave
    // 区别： onmouseenter和onmouseleave不具有事件冒泡传播的机制；
    outer.onmouseenter= function () {
        console.log(100);
    }
    inner.onmouseenter = function () {
        console.log(200);
    }
</script>
</body>
</html>
复制代码
weixin_34379433
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解javascript事件冒泡
10-23
事件冒泡是JavaScript中非常重要的一个概念，它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中，一旦某个元素上的事件被触发，那么这个事件会从元素本身开始，沿着DOM树向上层元素传播，直到到达根节点。在此...
JS 事件冒泡 示例代码
10-29
2. **向上冒泡**：如果内层元素没有阻止事件冒泡，那么事件将沿着DOM树向上传播，依次触发更外层元素上的事件监听器。 3. **终止冒泡**：如果某个元素的事件处理函数中调用了 `event.stopPropagation()` 或 `event....
事件冒泡和传播
mySoul
08-12 660
举栗子 事件输出hello world 事件有两种，一种为事件传播，一种是事件冒泡 事件传播和事件冒泡 这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候，ie使用事件冒泡。（两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window D...
js事件冒泡和传播详细解释
weixin_33849942的博客
08-12 222
举栗子 事件输出hello world 事件有两种，一种为事件传播，一种是事件冒泡 事件传播和事件冒泡 这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候，ie使用事件冒泡。（两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window DOM为一个完整的树...
jQuery-事件的向上冒泡传递机制
mantou_riji的博客
11-09 1084
事件的向上冒泡传递机制 1.问题引入： 现象： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ display: flex; width: 500px; height
【前端面试】何为事件监听？
Milk~每天分享一点点，技术进步一点点
08-24 447
事件监听 addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型(如 “click” 或 “mousedown”) 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的 事件传递有两种方式，冒泡和捕获 事件传递定义了元素事件触发的顺序，如果你将P元素插入到div元素中，用
事件传递和冒泡
孩子不懒的博客
01-17 280
事件是被动触发的，并不是你能主动“加”上去的。换句话说，元素只要符合某种事件的触发条件（比如鼠标点击），事件就必定会触发，而你所谓的“加”上去的是js对事件的处理过程（没有加的话就不会对事件做任何处理，但并不等于说事件就没有触发）。 对事件冒泡的正确理解是这样的：当div1内包含div2时，用户把鼠标移到div2上，会触发div2的onmouseover，然后，div2又会把这个事件冒泡（也可以理...
理解jquery事件冒泡
10-23
事件冒泡是JavaScript中的一种机制，当一个元素上的事件被触发后，该事件会沿着DOM树向上层元素传播，直到根节点。这种机制允许父元素捕获到在子元素上发生的事件。在某些情况下，事件冒泡可以非常有用，比如在给定...
js如何取消事件冒泡
10-26
在JavaScript中，事件冒泡（Event Bubbling）是一种事件处理机制，它描述的是事件从最深的DOM节点开始，然后逐级向上层节点传播事件的过程。例如，如果你点击一个按钮，该点击事件首先会在按钮元素上触发，然后依次...
利用JQuery阻止事件冒泡
10-20
在Web开发中，事件冒泡是JavaScript中一个重要的机制，当一个元素上发生了事件，比如点击、鼠标经过等，这个事件不仅会在该元素上触发，还会向上传播到更高级的元素，如父元素、祖父元素等。这样的设计便于我们对一...
事件冒泡机制
YY的博客
10-25 1154
事件的传递：标准事件流
js点击事件的冒泡传播
u011334211的博客
11-29 887
描述： 当我们再写前端页面时会遇到子元素和父元素设置了不同的点击事件，点击子元素的时候触发子元素的点击事件后，不会停止会继续向上传递，从而也触发了父元素的点击事件。这样的效果往往不希望它发生。 当然解决这个问题也非常的简单只需要调用一个函数阻止事件向上传递即可 event.stopPropagation(); 示例 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
阻止JavaScript事件冒泡传递
稻花香的博客
06-06 855
方法一： <a onclick="test2()">链接<p onclick="test(event)" style="font-size:20px">你好</p></a> function test(a) { window.event.cancelBubble = true; //用来禁止点击冒泡事件 阻止J...
事件的冒泡、绑定、传播、委派
WaNgLu:)的博客
09-28 161
事件的冒泡(Bubble) 所谓的事件的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡。 可以将事件对象的cancelBubble设置为true，即可取消冒泡 event.cancelBubble = true; 事件的绑定 - addEventListen...
一文彻底搞懂事件机制:冒泡、捕获、传播、委托 以及如何阻止冒泡与捕获
m0_54944506的博客
08-25 751
遇到的需求是项目预览，我们项目预览采用的是实际项目的代码，能够极大的减少开发量，但是在预览时有些操作是不需要的，就需要将某些click事件去掉，但是这些事件是写在实际项目中，是不能进行修改的，所以就想到了通过阻止事件捕获来取消click事件。：当需要给多个平级dom添加相同事件，可以通过事件委托到父节点，通过给父节点添加事件来避免多次添加事件，随着前端框架的普及以及jquery的没落，用的也就比较少了。：当dom触发了事件后，会先通过事件传播捕获到事件源，然后事件源通过事件传播实现事件冒泡。
DOM的事件传递机制 —— 捕获与冒泡
Stella的博客
06-28 1443
DOM的事件传递机制 —— 捕获与冒泡 在用react写form表单的时候，看到代码里面有一句e.preventdafault()，因为不知道这个函数什么意思，就查了一下，才发现和Event事件有关系，并且也逃不掉事件的捕获与冒泡。为此，借此机会顺便了解学习了一些相关知识。 文章参考： https://blog.techbridge.cc/2017/07/15/javascript-event-...
JS事件传播-冒泡和捕获
acm765152844的博客
02-22 1281
默认情况下，都是事件冒泡。 在火狐和谷歌中，可以在addEventListener时，将useCapture设置为true，则变成事件捕获。 冒泡从目标对象开始，向父级元素至window递进。 捕获从window底层逐级向目标对象传递 阻止事件冒泡 通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目
js事件传播机制之冒泡事件详解
FBm的博客
06-21 921
事件流是事件从页面接受并传播的过程，主要分三个阶段：事件捕获阶段、目标事件阶段、事件冒泡阶段。 事件捕获：事件的传播从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。（最外层到触发元素）
js阻止事件的冒泡传播
xiaozhuangyumaotao的博客
05-26 362
不管是内联的事件注册还是传统的事件注册亦或是addEventListener(事件句柄,回调函数,false);亦或是ie的attachEvent(事件句柄,回调);这四种中的任意一种，其事件传播机制都是冒泡传播，只有addEventListener(事件句柄,回调函数,true);的时候才是捕获（从外子内）传播。 冒泡和捕获是js事件传播的两种方式。 我们关注的是如何阻止事件的冒泡传播。先来复习一下冒泡传播的现象，有如下的html文档： <!doctypehtml> <html.
javscripts事件冒泡
最新发布
09-01
JavaScript事件冒泡是一种事件传播的机制，当一个元素上发生了某个事件（如点击事件），它会从内层元素开始，逐级向外层元素传播，直到传播到最外层的元素。 事件冒泡的过程如下：当一个元素上发生了某个事件，先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值