js return与stopPropagation阻止事件冒泡区别以及addEventListener

最新推荐文章于 2023-12-20 09:22:27 发布
最新推荐文章于 2023-12-20 09:22:27 发布
阅读量6.7k 收藏 1
点赞数
分类专栏： javascript 文章标签： 事件冒泡 事件捕获
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jayhkw/article/details/53897845
版权

事件冒泡

当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。

引用的百度百科,但好像跟我想要理解的事件冒泡还是有些不能理解。上面好像介绍了事件冒泡。每个事件都会产生冒泡，在javascript里，经常需要阻止事件冒泡。到底又是为什么 要阻止。

需要阻止事件冒泡一般是在什么情况呢,好好理了一下代码,

多次冒泡场景

在下面的html代码结构中，有两个元素需要绑定事件，我用jquery测试的,当然也可以直接js原生.click=function(){}

  1. a#bnt
  2. div#goods

点击goods box，a标签以外的区域会正常传递事件

当点击a的时候，会先传递a绑定的事件,但是a同属于div#goods区域，这时事件会继续向上传递，也就是2次冒泡出来，导致依次执行两个元素的所绑定的事件

当然在实际项目中很少会产生事件冒泡的尴尬

<div id="goods" style="width: 500px;height: 200px;background: #336699">
    <a href="http://baidu.com" id="bnt" style="color: #fff">click prop</a>
</div>

<script src="jquery.js">
最低0.47元/天 解锁文章
花村大地主
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用事件 与事件监听addEventListener 阻止事件冒泡、默认行为
qq_45305088的博客
11-03 5485
获取鼠标位置 function（event）{ console.log(event.clientX);输出鼠标的X轴 console.log(event.ClientY);输出鼠标的y轴 } 获取键盘 document.onkeydowm=function(e){ console.log(e.keycode);输出键盘的字符代码 } 触屏事件 box.ontouchstart=function（）{}触碰 box.ontouchend=function（）{}触碰离开 box.ontouchmo
js冒泡、捕获事件及阻止冒泡方法详细总结
10-25
JavaScript 和 jQuery 中的...总的来说，理解和掌握事件冒泡、事件捕获以及阻止冒泡的方法对于JavaScript和jQuery开发者来说至关重要，它们可以帮助我们精确地控制页面元素的交互逻辑，实现更高效、更灵活的用户界面。
addeventlistener事件参数_【学习教程】React 中阻止事件冒泡的问题
weixin_39762001的博客
11-26 400
来源 |https://www.cnblogs.com/Wayou/p/react_event_issue.html在正式开始前，先来看看 js 中事件的触发与事件处理器的执行。js 中事件的监听与处理事件捕获与冒泡DOM 事件会先后经历捕获与冒泡两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。IE9 及之前的版本只支持冒泡| A -...
addEventListener 的事件冒泡
weixin_34144848的博客
04-09 189
语法 target.addEventListener(type, listener, useCapture); target 文档节点、document、window 或 XMLHttpRequest。 type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 listener 实现了 EventListener 接口或...
js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播
一袋米要扛几楼_
01-22 9332
结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数 useCapture:可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagat...
JS_js阻止事件冒泡的方法
小歪博客
04-26 1541
阻止方法有三种： 1、event.stopPropagation(); document.querySelector("#login").addEventListener("click",(event)=>{ event.stopPropagation(); }) 2、return false; document.querySelector("#login").addEventListener("click",(event)=>{ return false; }) 3、event.pre
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
Javascript Event（事件）的传播与冒泡
11-27
JavaScript中的事件传播与冒泡是理解DOM交互时的关键概念，主要涉及到事件的处理方式和执行顺序。事件传播是指当一个事件（如点击）在DOM树中发生时，它会从最深的节点（事件的目标节点）开始，逐级向上层节点传播。...
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
10-20
在前端开发中，JavaScript是必不可少的工具之一，用于与用户交互和处理页面事件。本文将深入探讨两个关键的JavaScript事件处理概念：停止事件冒泡和阻止浏览器的默认行为。这两个特性对于确保页面行为符合预期至关...
JS传播事件、取消事件默认行为、阻止事件传播详解
10-19
JavaScript中的事件处理是Web开发中的核心概念，它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先，**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
10-30
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
js用addeventlistener绑定事件，阻止默认事件。
bbwdd的博客
09-13 8193
var linkG = document.getElementById('g');                 linkG.addEventListener('click', function(e){                         test();                         e.preventDefault();                 }
JavaScript中的事件流(事件捕获/冒泡)以及事件的兼容(事件的绑定addEventListener/移除removeEventListener,阻止冒泡/默认)
weixin_44870681的博客
05-27 439
一.事件流 1.事件流的介绍: 事件流描述的是从页面中接收事件的顺序. 事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件. 2.事件流包括两种模式：冒泡和捕获. (1)事件冒泡: 是值子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外)....
js基础:addEventListener与removeEventListener使用时，涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
qq_45796592的博客
12-20 2035
一文理解addEventListener与removeEventListener使用以及涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
阻止冒泡相关的三种方法
hu441805796的博客
05-08 1885
1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为还有一种有冒泡有关的： 3.event.preventDefault(); 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为
JavaScript--阻止事件冒泡stopPropagation和cancelBubble
weixin_30475039的博客
10-21 127
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 &...
vue事件对象-冒泡-阻止默认行为
aliven1的博客
11-22 364
事件对象： methods:{ show:function(ev){ alert(ev.clientX); alert(ev.clientY); } } &lt;input type="button" name="" value="按钮" @click="show($event)"&gt; 冒泡： &lt;input type="button" name="&quot
javascript中的cancelBubble和stopPropagation()
weixin_30823227的博客
07-19 111
都是用来阻止事件冒泡 cancelBubble可以阻止IE和火狐，比较通用 1. 事件目标 现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。 这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展 ，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DO...
JS基础-18-addEventListener和冒泡
HZ~的博客
08-03 1204
绑定事件的两种方式/DOM事件的级别 方式一：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {
addEventListener阻止事件冒泡
最新发布
06-07
如果你想在某个特定层级阻止事件继续向上冒泡，可以在事件监听器中使用`event.stopPropagation()`。 `event.stopPropagation()`方法的作用是停止事件在其当前捕获阶段的传播，这意味着后续的父元素将不会接收到这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值