为同一元素绑定多个同一事件

最新推荐文章于 2024-05-06 17:01:10 发布

HUANMAO2028

最新推荐文章于 2024-05-06 17:01:10 发布

阅读量746

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/HUANMAO2028/article/details/124264787

版权

本文介绍了如何为HTML元素同时绑定多个点击事件，通过JavaScript实现创建并绑定p标签的实例，包括使用.on方法和事件委托。通过实例展示如何在div中为不同按钮触发的不同p标签操作提供清晰的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为同一元素绑定多个同一事件

在进行为同一个元素绑定时我们首先要注意一个问题，一个是为元素绑定，还有一个是为元素解绑，分为这两部分。

（1.）在获取元素为其绑定时，我们使用比较简节的.on（“事件名字”“转换器”事件处理函数）.父级元素调用方法,代理子级元素绑定事件。

先要在body里面写两个标签和一个div.

再给div写一些样式.

（2.）我们开始写元素绑定事件.先写一个按钮一点击时，创建一个p标签

（3.）然后在其下面再写一个按钮二点击时，创建另一个p标签

（4.）要为这两个创建出来的p标签绑定点击事件.

（5.）这个绑定事件完整的视图如图.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HUANMAO2028

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【JavaScript】如何用原生JS给一个元素绑定两个事件？

m0_56349322的博客

03-30

2130

解决办法： var btn = document.getElementById('btn'); btn.addEventListener('click',func1); btn.addEventListener('click',func2); 这里的 addEventListener 叫事件监听 addEventListener 事件监听怎么用呢？语法：addEventListener(event,function,useCapture). 捕获阶段：事件...

2022-08-14 同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次?

GAARA

08-14

256

文章目录 0.结论 1.事件冒泡是自下而上执行 2.事件捕获是自上而下执行 3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次? 代码结果 4.使用事件委托解决新插入的子标签没有绑定上事件的情况 0.结论执行顺序:先捕获再冒泡执行次数:绑定了几个事件就执行几次即:祖先元素的捕获事件>点击元素的捕获事件>点击元素的冒泡事件>祖先元素的冒泡事件 1.事件冒泡是自下而上执行示例,略 2.事件捕获是自上而下执行示例,略 3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次

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

jQuery一个元素绑定多个相同事件的解决

热门推荐

lhzjj的专栏

08-27

2万+

jQuery的bind的函数在实际应用中用的不是特别多，只是他可以绑定一个事件，但不会即时触发，也可以通过unbind来解除绑定。在没有看到这篇文章之前，我一直不知道原来bind也可以有命名空间。事实上，我看完这篇文章后，再去翻了一下手册，也才发现了一点点的注释。但手册也仅仅是一句话就带过去了。没有过多的深究，或许他认为命名空间这玩意很简单，没有必要多解释？先看手册，由于bind方法有三个参数

在一个元素上绑定多个事件

qq_42763335的博客

08-08

3803

DOM2级定义了两个方法用于处理指定和删除事件处理程序的操作: addEventListener()和removeEventListener()。所有的DOM节点中都包含了这两个方法，并且它们都接受3个参数，要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序，比如要在按钮上为click事...

css绑定多个点击事件,有关js为元素绑定两个点击事件的问题

weixin_42300211的博客

08-03

321

varsideRight=document.getElementById('sideright');varside=document.getElementsByClassName('side-icon');varflag=true;for(vari=0;i(function(){if(flag){side[i].addEventListener('click',...

为元素绑定多个相同事件绑定事件的另一种方式复习介绍元素的事件绑定

Leon_Jinhai_Sun的博客

01-17

421

为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.1.js"></script> &l...

同一个元素绑定多个事件

qq_41773964的博客

12-11

654

在同一个元素上面绑定多个事件并且不会覆盖，使用addEventListener this.$root.$el.addEventListener('click', () => { this.$emit('update:showShare', false) })

javascript 一个函数对同一元素的多个事件响应

10-29

在JavaScript中，同一个元素可以绑定多个事件监听器，以便对不同的用户交互做出反应。这个功能在构建复杂的用户界面时非常有用。在给定的标题和描述中，我们关注的是如何用一个函数处理同一个元素上的多个事件，比如...

apache 设置主机头，同一端口绑定多个域名和网站

09-14

### Apache配置主机头在同一端口绑定多个域名和网站在Apache服务器中，有时我们需要在同一台服务器上运行多个网站，每个网站都有不同的域名。这可以通过配置虚拟主机（Virtual Hosts）来实现，其中一种方法是使用...

JQuery 给元素绑定click事件多次执行的解决方法

10-25

然而，在编程过程中，可能会遇到一个常见问题：元素的click事件被多次绑定，导致点击时触发了多个相同或相似的函数，这不仅影响用户体验，还可能导致不必要的资源消耗。本篇文章将详细介绍如何解决jQuery中元素click...

vue怎么给一个元素绑定多个点击事件

smx19980410的博客

03-02

6312

vue为一个元素绑定是可以多个点击事件，只是有顺序上的问题 <template> <div> <button @click="btnClick1();btnClick2()">按钮</button> </div> </template> <script> export default { name:'App', data(){ return{ } }, methods:{ bt

JavaScript-父子dom同时绑定两个点击事件，一个用捕获，一个用冒泡时执行顺序

qq_34412985的博客

04-01

876

事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。 1. 原生事件的发生顺序一般来讲，当为一个a标签添加click事件以后，点击这个标签，会先执行绑定的事件、后跳转页面。一个in...

同一个按钮想绑定多个事件的方法

m0_52946104的博客

09-21

1811

ie8 以下，和ie8 以上，this 分别指向window和当前调用对象的问题

一个div盒子，两个点击事件，互不干扰，可以使用阻止事件冒泡

新人一枚，互相学习哦！

07-24

1604

阻止事件冒泡

不能对同一个元素调用几次ON，绑定多个事件。。。否则就悲剧了

凡事预则立，不预则废

02-17

1051

事件不能绑定很多次。。不能对同一个元素调用几次ON。。。否则就悲剧了

javascript实现一个按钮绑定多个事件

m0_71912711的博客

03-30

2411

javascript实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏通过两种方法实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏。

自定义addLoadEvent函数为body.onload事件绑定多个函数

weixin_30952535的博客

09-06

102

addLoadEvent可以实现无论有多少个函数，都能让它们同时和window.onload事件绑定。 addLoadEvent工作流程：1 把现有的window.onload事件处理函数的值存入变量oldonload。2 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；3 如果在这个处理函数已经绑定了一些函数，就把函数追回到现有指令未尾。4 浏览器加载htm...

js中重复绑定事件