Javascript(四十)事件委托

最新推荐文章于 2021-06-26 10:25:30 发布
最新推荐文章于 2021-06-26 10:25:30 发布
阅读量62 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/117505022
版权

在这里插入图片描述
一般我们实现一堆相同节点去添加点击时事件的时候用的都是上述方法。但是上述方法有比较多的缺点：
缺点1：我们给每个li都设置了同样的函数，浪费资源。
缺点2：新增的节点并没有获取到点击事件。原因是因为我们给按钮触发点击事件新增li时，循环已经结束了。此时只能遍历到已有的节点。

解决：事件委托
委托：

A委托B做某事：

A发布任务 委托方

B执行任务 代理方

事件委托：

​ 1.找到当前节点的父节点或者祖先节点

​ 2.将事件添加到你找到的这个父节点或者祖先节点上

​ 3.找到触发对象，判断出发的触发对象是想要触发的事件，进行后续操作。
在这里插入图片描述
li委托ul将li变成红色，利用目标对象 target

事件委托会出现事件捕获现象：不算是事件捕获，因为输出的时整个节点所以就造成内部innerText也会被获取到
在这里插入图片描述

每天进步一大步
关注
专栏目录
javascript事件委托的方式绑定详解
10-24
也许偶尔就会遇到“事件委托”，但是，大多数时说的是“事件绑定”，对于“事件委托”，或是不提，或是浅尝辄止。对于我这个比较好奇的人来说，实在很蛋疼。尤其是想更多的了解“事件委托”的时候。
JavaScript事件委托实例分析
10-24
JavaScript事件委托是一种优化网页性能的事件处理技术，它利用了事件冒泡的原理，将事件处理器绑定到一个共同的父元素上，而不是每个子元素都单独绑定。这种方法减少了内存消耗和DOM操作，尤其是在动态添加或删除...
JavaScript事件委托用法分析
10-24
JavaScript事件委托是一种利用事件冒泡原理来管理事件的技术，它允许开发者将事件监听器添加到一个父元素上，而不是给每一个子元素单独添加事件监听器。这种方式在处理大量子元素或动态生成的元素时非常有效，可以...
JavaScript事件委托技术实例分析
10-24
JavaScript事件委托技术是一种有效的事件处理机制，它主要用于提高程序性能，尤其是在处理大量具有相似事件响应的DOM元素时。这种技术基于事件冒泡原理，即在一个DOM元素上触发的事件会向上冒泡到更上层的DOM元素。...
JavaScript事件委托实现原理及优点进行
10-14
JavaScript事件委托是一种高效处理大量动态DOM元素事件的技术，它基于事件冒泡机制，将事件监听器添加到父元素而非所有子元素上。这种技术的主要优点在于性能优化和动态添加DOM元素的适应性。 1. **什么是事件委托...
Javascript（五十四）class定义构造函数
weixin_44730244的博客
06-10 1436
普通构造函数的定义： class定义： 所有的属性写在constructor构造器中，原型方法（省略function）直接写在构造函数体中 普通构造函数继承： class继承： class 子级构造函数名名 extend 父级函数名 {} 属性继承：super（父级属性1，父级属性2，…） 原型继承继承结果与普通函数Object.create()作用一样。直接将子一级的原型指向父一级的原型，值拷贝。 整体比较： 官方构造函数方法 function Person(name,sex,age){
Javascript（七十二）jquery中的animate方法
weixin_44730244的博客
06-23 1385
.animate 实现动画效果 ，这与我们之前封装的完美运动框架差不多的。但是他这个默认的运动形式不是缓冲运动，是属于慢快慢。 第一个参数：对象，样式名：样式最终效果 第二参数：动画持续时间 第三参数：运动形式：仅有两种 ‘linear’:匀速 ‘swing’：慢快慢（默认）可省略。 第四个参数：回调函数，动画结束时执行。 如果想拓展更多的运动形式，可以引入jquery-ui框架（类似于boostrap，通过class名，添加样式），但是基本被淘汰了。https://www.jqueryui.or
Javascript（四十三）localStorage本地缓存
weixin_44730244的博客
06-06 1205
本地存储技术包含： localStorage（客户端微型数据库）： 1.永久存储；2.最大存储5M 3.只能去存储字符串和数字，如果存储内容多的话会消耗内存空间，导致页面变卡。4.localStorage不能被爬虫抓取到。5.在浏览器的隐私模式下面是不可读取的 cookie 1.可以设置过期时间 2.最大可以存储4KB 3.每一个域名下面可以存储50条数据（如果已经4kb，可能不到50条，但是也不可以继续存储） sessionStorage（结合后台使用） 1.存储容量小 2.只能存储一次会话（窗口打开和
JavaScript(三十一)属性节点的获取attributes
weixin_44730244的博客
05-29 996
attributes 功能：获取所有的属性节点 返回值：伪数组/数组 数据类型：对象 属性节点集合(NamedNodeMap) 属性节点集合(NamedNodeMap) :无序的、不重复的 node.attributes.getNameItem(‘属性名’) 功能：获取对应属性名的属性节点 返回值：属性节点 （属性名=属性值） 注：也可以直接通过访问相应的属性节点： obox.attributes[‘属性名’]) ...
Javascript（二）js常量和变量
weixin_44730244的博客
05-15 953
常量/字面量/直接量 概念：值不可以被修改的叫做常量 JavaScript中的数据类型： symbol、number、string、undefine、boolean、bigInt、object、null 基本数据类型: 只能存储一个值 数字：number、 字符串：string（’’，" "） 单、双引号必须成对出现 ‘100’,‘null’,‘undefined’ 布尔值：boolean（true、false） 复合/引用数据类型: array（批量处理大量数据、函数）、object（结构复杂，数据、
Javascript（四十一）Event事件监听器
weixin_44730244的博客
06-03 863
事件监听器：addEventListener（）方法用于向指定元素添加事件监听，IE8以下不支持，火狐和谷歌支持。 普通的事件绑定： 元素节点.on+事件类型=匿名函数 缺点：1.重复事件会被覆盖 缺点2：事件移除使用简单粗暴的null代替事件处理函数 addEventListener事件绑定： target.addEventlistener(‘事件类型’，匿名函数/执行函数名，false/true) 注：匿名函数名没有双引号 第三个参数是否使用捕获（捉)(反向冒泡)，默认为false，为冒泡 好处：可
Javascript（三十三）this和找到当前点击按钮的下标
weixin_44730244的博客
05-30 739
this：只要封住函数，任何一个函数系统都会内置一个叫做this的变量。this变量存储的是地址，是当前函数主人的地址。 常用的情况： 对象的函数属性 一般情况下： this==obj,也就是说obj是当前函数的主人。所以说this存储当前主人的地址，并且指向当前主人。（this指向是可以通过apply和call以及bind方法更改的） 全局模式下的函数： 一般来说，函数如果处于全局模式，this指向都是window。但是如果使用严格模式this就是undefined 事件处理函数： 在上面案例
JavaScript(五十六)服务器入门以及安装
weixin_44730244的博客
06-12 717
软件构架： C/S (客户端->服务端) B/S(浏览器端->服务端) 服务器 apache这个软件运行在你的电脑上，那么你电脑上某一个磁盘就对外可见，别人可以通过IP或者域名访问 服务器：资源提供方 客户端 ：资源受益方 服务器和客户端都是 相对概念，服务器可以是客户端，客户端可以是服务器。 服务器安装 因为apache的安装比较繁琐，所以一般我们都是安装的集成开发环境：WAMP、PHPnow、LAMP 哪些技术可以开发网站 php、jsp、asp、python、nodejs、c/c++
Javascript（七十五）jquery的ajax和cookie
weixin_44730244的博客
06-26 602
JQ的cookie使用 下载jquery.cookie.js文件 下载地址：https://plugins.jquery.com/cookie/ $.cookie（） （与我们之前封装的cookie函数类似，可以看我之前的博客，有讲cookie使用） $.cookie(name) 取值 $.cookie(name,value) 设置cookie 键名和键值 $.cookie(name,value,option) 设置cookie 键名和键值以及cookie可选项，option必须是对象 $
JavaScript（十八）严格模式
weixin_44730244的博客
05-22 518
除了正常运行模式，ES5添加l第二种运行模式：‘严格模式’ 写在哪个作用域下，就在那个作用域下生效。 格式：‘use strict’ 注：尽量不要把严格模式写在全局作用域下。 严格模式目的： 1.消除Javascript语法的一些不合理不严谨之处，减少一些怪异行为。 2.消除代码运行的一些不安全之处，保证代码运行的安全。 3.提高编译器效率，增加运行速度。 4.为未来新版本的Javascript做好铺垫 使用严格模式，主要变化： 1.全局变量声明时，必须加var 普通模式： 严格模式： 2.this无法
JavaScript(六十二)认识JSONP跨域
weixin_44730244的博客
06-15 512
请求数据 同服务器下请求： 我们试试不同服务器下请求， 能够看到我们的请求被拦截了，原因是少了“Access- control - allow - origin”头信息 ，这就涉及到了跨域请求的问题 同源策略 解决跨域请求，首先要知道同源策略是什么。 同源策略：1.同协议 2.同IP/同域名 3.同端口号 如果我们下载的数据url和网页的url满足以上三个条件，那么我们就能确定他们就是同源的，我们就能够下载数据了。 ajax只能下载同源数据，跨源的数据禁止下载 之所以会这样，就是为了保证服务器的安全
JavaScript（六十一）mysql和php 前后端项目
weixin_44730244的博客
06-15 490
1.登陆格式限制 2.数据传输 3.请求判断 4.加密 5.发送请求 6.返回提示 完整代码:github :
Javascript(六十三)网络协议
weixin_44730244的博客
06-16 415
网络分层的概念 OSI 7层的网络分层 通用 5层网络分层 网络传输协议：网络数据在互联网进行传输，遵从的传输规则 传输层：TCP/UDP port端口号（确定来自哪个软件） 网络层：IP协议 确定传输给哪台电脑（IP） 数据链路层：数据信号（1.0） 物理层：数据信号->光信号。 http协议（超文本传送协议）： 功能：使万维网客户程序与万维网服务器程序之间的交互遵守严格的协议。 连接方式：HTTP是一个的面向事务的应用层协议，使用TCP连接进行可靠传输。 注：事务：一系列的信息交换，而
Javascript(六十六) 项目开发工具Gulp
weixin_44730244的博客
06-19 402
https://www.gulpjs.com.cn gulp是基于node.js的一个前端自动化工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用glup你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。 下载glup 1.进入node.js中文文档下载nodejs（http://nodejs.cn/download/） 2.点击安装包一路点击下载即可 3.启动nodejs windows： 点击windows键（开始键）=>nodejs文件=>n
JavaScript实现DOM事件处理与事件委托
"这篇文档主要讨论了如何使用JavaScript来处理DOM元素的事件，特别是当需要添加多个事件、移除事件或者在封装JavaScript控件时如何处理自定义事件。文中提到了浏览器提供的`addEventListener`和`attachEvent`方法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值