事件委托-给新添加的列表添加绑定事件

最新推荐文章于 2023-10-15 15:21:59 发布
最新推荐文章于 2023-10-15 15:21:59 发布
阅读量226 收藏
点赞数
分类专栏： 前端知识点 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sam80000/article/details/120099529
版权

事件委托的应用

1.应用场景

在这里插入图片描述

给新生成的列表添加绑定事件。添加完成后，新添加的删除和修改按钮没有功能。需要通过事件委托，根据事件冒泡原理，点击触发对象，事件冒泡到父节点，完成事件。

2.代码

将子节点的事件绑定到父节点，根据触发对象进行逻辑应用
在这里插入图片描述

            //给新添加的删除和修改添加点击事件
            oTb.onclick=
最低0.47元/天 解锁文章
sam80000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态添加元素及绑定事件造成程序重复执行解决
11-27
本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件，类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行，很多人在文章里写到了，也说了用off...
老生常谈js动态添加事件— 事件委托
12-12
其所谓的动态添加事件实质就是指js中的事件委托。 我们知道在js中，事件处理只能绑定在当前被选中的元素上，换句话也就是说，事件处理只能绑定在当前文档已经存在的元素上！但是，往往小伙伴们都会遇到一个问题就是，我的元素是后来动态添加到页面的，而我又想给该元素绑定事件，怎么处理？ 为了说明白这一问题，我们假设需要给后来添加到当前页面的元素添加click事件。 解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件，而且委派事件往往开销也会更小！ 题外话：举一个最简单的例子：当页面上有1000个div的时候，如果直接给div绑定click事件，其会为1000个元素绑定事
JavaScript动态添加事件之事件委托
11-23
先给大家讲下什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 其所谓的动态添加事件实质就是指js中的事件委托。 我们知道在js中，事件处理只能绑定在当前被选中的元素上，换句话也就是说，事件处理只能绑定在当前文档已经存在的元素上！但是，往往小伙伴们都会遇到一个问题就是，我的元素是后来动态添加到页面的，而我又想给该元素绑定事件，怎么处理？ 为了说明白这一问题，我们假设需要给后来添加到当前
如何在vue项目中给ul>li列表使用事件委托
WebDestiny的博客
11-29 6293
ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me </li> </ul> 然后这样的话，结果就是所有的li元素都绑定了事件。 我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。为了更好...
利用事件委托实现点击li列表
qq_35129986的博客
04-11 4230
我理解的事件委托就是事件冒泡加事件源，给父类元素绑定事件，来监听子元素的冒泡事件，并找到是哪个子元素(事件源)的事件            点击事件绑定在ul上 var uls=document.getElementsByTagName('ul')[0]; uls.addEventListener('click',function(e){ var event=e||window.event...
动态添加列表-创建、添加节点和使用事件委托
mmmmmmmmzw的博客
03-07 354
动态添加列表-创建、添加节点和使用事件委托 最近学到了JS的DOM操作，做了一个小练习，用到了创建、添加节点和使用事件委托等知识点。 网页显示 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
JS绑定事件的三种方法(简单易懂)
m0_74577714的博客
10-15 3448
相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？让我为大家介绍三种绑定事件的方法吧！以下都是用点击事件(click)来做示范。
jQuery动态绑定事件的方法（超详细）
zy1992As的博客
03-08 4592
以上只是一些常用的jQuery动态绑定事件的方法，jQuery还提供了许多其他方法来处理事件，如.keydown()、.keyup()、.submit()等等。1..on()：这是一个通用的事件绑定方法，可以用于任何事件类型，包括自定义事件。4..delegate()：这是一种早期的事件委托方法，已被.on()取代。5..live()：这是一种早期的事件委托方法，已被.on()取代。3..bind()：这是一个早期的绑定方法，它允许绑定多个事件处理程序，但已被.on()取代。
事件委托，元素节点操作，todolist计划列表实例
weixin_30537391的博客
05-08 175
一. 事件委托 事件委托就是利用冒泡的原理，把事件加到父级上，来代替子集执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 比如有20个<li>，并且在每个li中都绑定事件的话很麻烦，可以把事件绑定在li的父级<ul>上 例子1，实现效果是点击每一个li，弹出相应的文本内容，就是1，2，3...8...
JS如何实现动态添加的元素绑定事件
12-13
第一种是在动态添加的html代码里添加oclick事件，然后给传个唯一的参数来判断点击了哪个，然后做相应的操作，第二种是通过事件委托的原理来处理，事件委托将一个事件侦听器实际绑定到整个容器，然后在单击它时能够...
事件委托
01-08
1.提高性能，因为给子元素事件要绑定多次，事件委托，只需要绑定一次 2.动态添加的子元素也会具有事件 点击btn添加一个li的案例 1 2 3 按钮 var lis = document.querySelectorAll(li); var ul = document....
Vue列表 — 事件委托
weixin_34281477的博客
10-24 545
前言 作为疯狂的操纵dom转到vue这样通过数据驱动的程序员来说，姿势的转换也自然产生了很多疑问。比如，事件委托。包括我看现在公司的前端代码，发现所有列表的绑定形式都是： <ul> <li v-for="(item, index) in data" @click="handleClick(index)"> ...
js为li列表添加点击事件
热门推荐
caoPengFlying的博客
11-09 5万+
今天看到一个面试题目//html代码 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> //js代码 var oli = document.getElementsByTagName("li"); for(var i=0; i<oli.length; i++){
js给列表添加点击事件，返回相应内容
空中弥漫着HTML的博客
03-16 6011
面试题之“给列表添加点击事件，使其显示相应的内容” 方法一: var lis = document.getElementsByTagName("li"); for(var i = 0; i&lt;itemli.length; i++){ lis[i].index = i; //给每个li定义一个属性索引值，赋 lis[i].onclick = f...
v-for 给每项绑定事件时，需要使用「事件代理」吗❓
老司机的后备箱
06-17 1912
纵观掘金里对「Vue事件代理」的讨论几乎没有～大家不如跟这笔者一起，探寻 中事件绑定的奥秘吧。（有些叫法是：事件委托，名词都不重要！大家知道就行，本文统一称之为「事件代理」）阅读本文你可以知道：注：本文调试的 源码 版本为 先看几个问题👀：先看一段代码：在每个 中绑定了点击事件 相信这是绝大部分 Vueer 完成业务功能的写法（包括我🌚）。此时此景，不知道在座的各位会不会想到经常碰到的一道面试题：「事件代理」❓ 以前我们不用 之前，直接给列表绑定事件时，是否都会用一个叫事件代理的写法呢。利用事件..
原生js给列表绑定事件
qq_38387487的博客
02-28 1311
方法一： var lis = document.getElementsByTagName("li"); for(var i = 0; i&lt;lis.length; i++){ lis[i].index = i; //给每个li定义一个属性索引值，赋 lis[i].onclick = function(){ alert("下标索引...
Vue在列表中绑定点击事件后的处理方法
听海的博客
07-14 1万+
问题描述：使用Vue框架渲染了一个列表，当列表中存在点击事件时，怎么才能获取到类似于jQuery的$(this)的方式获取元素呢？
Sass和Less（预处理器）
sam80000的博客
01-11 2797
Sass和Less（预处理器）一、了解Sass和Less二、Sass和Less 语法2.1 注释2.2 语法 一、了解Sass和Less Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS，一个基于 Node.js 的预处理器，因著名 CSS 框架 Bootstrap 的使用而声名鹊起。此外还有 Stylus ，一种对形式无所限制的 LESS 版本。它是一种无论你想怎么样使用，大都能顺利转换成 CSS 的程序语言。 Sass和Less都属于预处理器。Less文件以.less结尾，Sa
jquery 给动态添加的select元素绑定change事件
最新发布
12-19
要给动态添加的select元素绑定change事件，可以使用jquery的事件委托机制。首先，需要在页面加载完成时，使用on方法对document对象进行委托，选择要绑定change事件的父级元素或者document本身。然后将事件类型设置为change，选择要委托的目标元素为动态添加的select元素，并在callback函数中处理change事件的逻辑。 具体的代码如下： ```javascript $(document).on('change', 'select.dynamic-select', function() { // 处理change事件的逻辑 var selectedValue = $(this).val(); console.log('选中的值为：' + selectedValue); }); ``` 在这段代码中，'select.dynamic-select'表示要委托的目标元素为class为dynamic-select的select元素，可以根据实际情况修改选择器。当动态添加的select元素被改变时，就会触发change事件，并执行callback函数中的逻辑。 通过这种方式，可以实现对动态添加的select元素进行change事件绑定，而且不会受到页面加载时元素是否存在的限制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值