Javascript 委派

最新推荐文章于 2023-07-13 11:27:54 发布
最新推荐文章于 2023-07-13 11:27:54 发布
阅读量82 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49138897/article/details/116238719
版权

Javascript委派

1.首先打开DW创建一个html文件。

2.

这时候我们在已经创建好的html文件中的body内部 写入一个无序列表 并给这个无序列表的ul标签加个id为ul1 并在body最底部添加script标签用来写入我们需要js

3.

委派的定义：将事件统一绑定给元素的共同的祖先元素这样当后代元素上的事件触发时会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件好处利用了冒泡，通过委派可以减少事件绑定的次数提高程序的性能。

经过委派的定义我们可以得知 通过父元素绑定事件委派然后由子元素去的触发从而到达委派的效果 所以我们需要获取li上面的ul标签作为委派的绑定对象 这里创建一个变量a获取ul标签

由于此次中我们将用点击的方式去展示委派的效果 所以要给获取到的ul标签的变量a绑定一个点击事件

并给这个点击事件传入一个event的参数

4.

target的定义 事件属性可返回事件的目标节点（触发该事件的节点）

因为是绑定li标签的父元素 我们需要判断点击事件是不是被li标签触发 所以给这个传入的参数event 这个变量赋一个 event.target的值 然后写一个if的判断语句来判断是否为li标签触发此点击事件 tagName 是获取元素的标签名

5.

由于event是获取到触发他的元素所以我们可以直接给event写入效果 从而到达改变li标签

6．

最后浏览器中完美运行

weixin_49138897
关注
JS中事件的委派
ChuanyangChen的博客
02-21 1447
什么是事件的委派❓ 指事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素 事件的委派利用了事件的冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 ???? 例子：通过事件委派，实现点击<ul></ul>中的每一个<li></li>都能弹出弹框，弹框里面写着“H-E-L-L-O” 但该例子存在一些问题，代码后面会继续阐述 <!DOCTYPE html> <html lang="en"> <he
Web前端中javaScript设计模式事件委派
Ic10000的博客
12-09 253
一、事件委派 当给多个子元素绑定监听事件，利用事件冒泡的特性(子元素发生事件，默认事件会进行向上传递的过程)，取消对子元素的监听事件，给父元素绑定相同类型的监听事件。 优势： 减少绑定事件 可以绑定未来元素 减少浏览器的开销 寻找触发事件元素: 为什么要找 : this永远指向的是绑定事件的元素（父元素） 使用; 高级浏览器: target 和 srcElement IE:srcElement 执...
js事件的委派
dengfengling999的博客
01-24 535
知识点： 事件的委派： 指将事件统一绑定给元素的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件 事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能 例子： 点击按钮添加 超链接，点击超链接提示内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv
JS事件委派
weixin_54687679的博客
09-29 292
事件的委派时利用了事件的冒泡，通过委派减少事件的绑定的次数，提高程序的运行效率。例子： 未完待续…
JavaScript——委托模式
Mr.ShyZhang趟过的前端“小路坑”
05-26 744
想实现一个效果① 点击btn按钮 可以添加一个li标签（li标签里面有文本内容和点击删除的span标签）② 点击每个li标签 可以实现li标签变换背景颜色③ 点击每个li标签中的span标签 可以实现删除所在的li标签1. 普通过程函数书写&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF...
javaScript进阶-事件委派javascript
chaoxidawang的专栏
01-09 424
这篇文章的原稿来自于 http://www.aqee.net/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/ 对其中的事件委派做一些自己的理解: 当页面上某个元素上的事件触发时,而在 dom 继承关系上,这个元素的所有子元素也能接收到这个事件,这时你可以使用一个在父元素上的事件处理器来处理,而不是使用一堆的各
Javascript核心概念与实用练习
最新发布
09-19
事件的深度解析与代码实战包括事件的触发、事件对象、事件的绑定、事件的冒泡、事件的委派、事件的传播、事件的取消等。 正则表达式 正则表达式是一种字符串模式，用于定义字符串的规则。计算机可以根据正则表达式...
事件委派案例
huishi__的博客
03-27 5281
开发工具与关键技术： Visual Studio Code 1：创建一个button按钮和一个ul标签，ul标签下创建3个li标签，button按钮添加onclick点击事件，li标签添加a标签 2：给button和li添加内容 7 3：给ul添加ID 4：使用封装函数，把封装函数命名添加到onclick点击事件里面 5：创建一个createElement元素 5：创建一个innerHTML属性 6：点击添加元素给ul标签添
事件的委派
weixin_54668937的博客
08-29 154
文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 8 月 28日 下面我们来看一下Javascript里事件的委派， 首先我们要知道事件的委派是什么， 事件的委派就是将事件统一绑定给元素共同的祖先元素， 这样当后代元素上的事件触发时，会一直冒泡到祖先元素， 从而通过祖先元素的响应函数来处理事件。 我们在为每一个a标签绑定一个单击响应事件时， 这种操作比较麻烦，而且这种操作只能为已有的a标签绑定单击事件， 新添加的超链接
JavaScript学习 -- 事件冒泡与事件委派（委托）
weixin_41489908的博客
07-13 297
事件冒泡是JavaScript中的一种事件处理机制，它将事件沿着从子元素到祖先元素的路径进行传播。在事件传播过程中，我们可以使用stopPropagation()方法来停止事件的继续传播，从而避免意外行为，并提高性能。了解如何控制和防止事件冒泡是Web开发人员必备的技能之一。在实践中，请考虑使用事件委托技术和stopPropagation()方法来正确地处理事件并优化您的代码。
JS中事件、事件绑定、事件对象、事件冒泡、事件委派、事件传播、常用事件等
王春燕的博客
04-28 2010
一、事件 1、事件 用户与浏览器特定的交互瞬间。 二、事件绑定 要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中 1、三种事件绑定 a、在DOM元素中直接绑定； <button onclick="open()">按钮</button> <script> function open(){ alert(1)；
JS-基础 --事件的委派
m0_52534604的博客
05-22 424
学习目标简介： 先来聊聊委派是什么意思，指委托安排； 委任派遣。 但在js中就是也是类似于中意。 —-指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。 —-事件的委派是利用了冒泡，通过委派可以减少事件的绑定的次数，提高程序的性能。 学习内容：target event(事件对象)中的target表示的是触发事件的元素 在body的代码如下： <body> <ul id="ul"> <l
JavaScript——事件委派之详解
Searchin_R的博客
10-15 6310
在看代码之前，我们先来了解一下什么叫事件委派。 事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。 换句话说，就是把一个本来让下属干的事情交给上司做了。 比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一...
JS事件事件的冒泡和委派
大桶爆米花eee
04-01 4461
事件的冒泡（Bubble） 指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;s
JS----简单的事件委派
Damys
01-04 5881
功能：事件委派实现--点击弹出 href的值 Opera Web Standards Curriculum Sitepoint A List Apart YUI Blog Blame it on the voices Oddly specific //事件委派1 (function(){ var resources = doc
JS 事件委派
mengxianglong123的博客
05-04 871
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var...
js中事件绑定3种方法以及事件委托
热门推荐
程序员秋风的博客
04-23 4万+
事件绑定首先，我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom<button onclick="open()">按钮</button><script> function open(){ alert(1) } </script>2.直接绑定<button id="btn">按钮</button> <script> document.getElementById('btn'
JS基础-事件委派
linqunbin的博客
06-01 3020
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
JavaScript命令模式详解：实例演示与注意事项
这样，我们避免了直接修改DOM，而是通过命令模式将责任委派给命令对象，提高了代码的可维护性和复用性。 总结起来，本文通过一个简单的JavaScript应用实例，展示了如何使用命令模式来实现可重用的命令对象，处理回...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值