[JS][技巧]利用事件冒泡特性处理多个按钮的单击事件

最新推荐文章于 2022-10-25 13:18:03 发布

涛锅

最新推荐文章于 2022-10-25 13:18:03 发布

阅读量2.8k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq807081817/article/details/49490071

版权

本文探讨了如何巧妙地运用事件冒泡特性，避免为每个按钮单独绑定点击事件。通过在父元素上设置click事件监听器，结合event.target获取触发事件的按钮，并根据按钮的textContent进行操作，实现对多个按钮的高效管理。

摘要由CSDN通过智能技术生成

以前一直不在意这个事件冒泡，只是有时候会用到stopPropagation()去阻止事件冒泡，最近发现，利用好了事件冒泡这一特性，有些地方会非常方便。

拿个最直观的例子来举例 ToolBar

界面
这里写图片描述

HTML

<div id="toolbar" class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">
        <button type="butt

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

涛锅

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript事件流，事件冒泡和事件捕捉

Niall_Tonshall的博客

01-23

731

本文是笔者阅读对JS事件流的深入理解之后的学习记录，@谢小飞系原文作者，感谢！什么是js事件？什么是原生事件和自定义事件？在JavaScript中有一个Event接口，表示在DOM中出现的事件，一些事件是由用户触发的，例如鼠标或键盘事件；而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。事件也可以通过脚本代码触发，例如对元素调用 HTMLElement.click() 方法，或者定义一些自定义事件，再使用 EventTarget.dispatchEvent() 方法将自.

js冒泡事件

旅人

04-23

142

JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出...

参与评论您还未登录，请先登录后发表或查看评论

js多个<ul>相应不同的点击事件

weixin_30670925的博客

02-24

405

$('ul').on("click","li#left",function(){ currentProvince = $(this).text().replace(/[0-9]/ig,""); $(this).siblings().removeClass('choose'); $(this).addClass('ch...

JS中点击事件冒泡解析

06-26

299

关于Javascript中的点击事件冒泡的问题，很多初学者都处理不好。什么是点击事件冒泡？例：今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。我对小明说：”咱们出去玩吧“。小明十分乐意的回答到：”好啊“。小明的爸爸听到后，说到：”把作业写完后在出去玩“。小明的爷爷也发话了：”预报有雷阵雨，就别出去玩了“。我本来只是询问一下小明的意见...

JS(基础)利用冒泡进行事件委托

benlalagang的博客

07-02

196

JS(基础)利用冒泡进行事件委托

ASP.NET页面按钮单击事件失效的解决方法

10-26

首先，按钮单击事件不起作用的原因可能包括：事件处理器未正确绑定、客户端脚本冲突、服务器端代码逻辑错误、页面控件状态问题（如视图状态丢失）、以及浏览器兼容性问题等。 1. 事件处理器未正确绑定：确保***页面...

JavaScript给按钮绑定点击事件（onclick）的方法

10-24

这种方法更灵活，因为它允许你为同一个元素添加多个事件处理程序： ```javascript document.querySelector('button').addEventListener('click', displayDate); ``` 在这个示例中，`addEventListener`接收两个参数...

深入理解jQuery中的事件冒泡

10-22

总结起来，事件冒泡是JavaScript和jQuery中一个非常重要的概念，它允许开发者通过在父元素上统一处理事件来简化事件监听的设置。然而，事件冒泡也可能带来一些问题，如不必要的事件处理和默认行为。通过使用`event....

多次注册事件会导致一个事件被触发多次的解决方法

09-05

这个问题在给定的描述中尤为突出，它涉及到一个按钮的`click`事件被反复注册，从而在单击时触发多次。在JavaScript中，我们通常使用`addEventListener`或jQuery的`.on()`方法来绑定事件处理函数。如果不小心在同一...

JS绑定多个对象的单击事件

weixin_30306905的博客

10-24

153

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body><div id="test"> <ul> <li><a>this one</a&g...

js-事件的冒泡

最新发布

weixin_47295886的博客

10-25

420

/可以将事件对象的cancelBubble设置为true,就是取消冒泡。冒泡指的是事件向上传导，当后代元素的事件被触发时，其祖先元素。事件的冒牌：其祖先也会触发。取消冒泡：用事件对象。

JavaScript 事件委托(利用事件冒泡)

houyanhua1的专栏

03-17

485

事件委托：利用事件冒泡，通过为父系元素绑定事件和event.target来筛选子级元素，从而实现为动态创建的新元素的事件绑定。demo.html：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title&

js点击事件冒泡

触不到的颜色是否叫彩虹的博客

11-03

377

当子节点与父节点上均有点击事件的时候，一般情况下点击会触发两个事件（子节点的点击事件会向父一级传递），有时需要在点击子节点的时候，中止父节点接下来的行为。<div onclick="fun1(event)" >父节点 <p onclick="fun2(event)">子节点</p> </div>var fun1 = function (e) { alert("我是父节点点击事件");

a标签冒泡

LONGSHAN123456789的博客

04-01

1977

的

原生JS如何利用冒泡减少事件的触发，只代理给共有的父元素。

聪明的竹子的博客

02-15

2319

相信很多人都知道事件代理这个方法,因为在JQuery里面，已经封装好了。$(父元素).on('click','父元素下的子元素标签名',function(){...})但是如果用原生JS来写呢？相信有部分都会懵逼了….因为我曾经也是懵逼的一员elem.addEventListener(“事件名”,callback,false/true）; 为elem元素的指定”事件”，绑定callb

多个的点击事件

qq79907141的博客

08-14

292

多个按钮单击事件

sinat_25378595的专栏

01-19

405

public class Myonclick implements View.OnClickListener { public void onClick(View v){ switch(v.getId){ case R.id.btn1: break; case R.id.btn2: break; case R.id.btn3: break; } } 然后

JS中的事件冒泡

qq_41557320的博客

10-09

2929

js中的事件冒泡指的是：多个元素嵌套的时候，它们就会有层次关系，当这些元素注册了相同的事件时，如果其中一层的元素触发了这个事件，可能导致其它层的元素也触发这个事件，这样一来就会造成混乱。这个情况就是事件冒泡。为了避免这种混乱的发生，我们要想办法阻止事件冒泡的发生。看一个事件冒泡的例子：上面是三个相互嵌套的div，样式代码这里省略了，js代码中，分别为这三个div注册了onclick点击事件...

JavaScript事件处理与冒泡详解

事件冒泡带来的性能优势在于，如果多个子元素需要响应相同的事件，可以在它们的共同父元素上设置一个事件处理程序，而不是为每个子元素单独设置，这减少了内存和CPU的消耗。然而，有时我们可能希望阻止事件冒泡，...