JavaScript设计模式(二十六)【委托模式】

最新推荐文章于 2023-08-30 06:34:04 发布
最新推荐文章于 2023-08-30 06:34:04 发布
阅读量153 收藏
点赞数
分类专栏： Javascript设计模式
原文链接：https://blog.csdn.net/WuLex
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>委托模式</title>
    <script>
        /*
        * 委托模式:多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理
        * 委托模式有效的减少了资源的消耗，是非常常见的模式
        *
        * 同时，委托模式可以预言未来，我们可以事先在容器上定义事件处理，然后再向容器内插入东西
        *
        * 还有可以解决内存泄漏的问题（ie下计数器垃圾回收机制）
        * 当一个标签不存在了，但是标签上还有事件的话，并不会被回收
        * 所以把事件统一定义在父元素上，防止内部元素消失但没有释放的问题
        * */

        window.onload = function() {
            var ul = document.getElementsByTagName('ul')[0];
            ul.onclick = function(e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                if (target.nodeName.toLowerCase() === 'li') {
                    console.log(target.innerHTML);
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li class="menu">1</li>
        <li class="menu">2</li>
        <li class="menu">3</li>
        <li class="menu">4</li>
        <li class="menu">5</li>
        <li class="menu">6</li>
    </ul>
</div>
</body>
</html>
.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-事件委托详解，看完这一篇就够了
2401_84092398的博客
04-03 890
/ ...... 代表中间还有未知数个 li这里，我们想把 #list 元素下的 li 元素（并且它的 class 为 class-1）的点击事件委托代理到 #list 之上；如果通过上述的方法我们还需要在判断之中在加入一个判断；但是如果想像 CSS 选择其般做更加灵活的匹配的话，上面的判断未免就太多了，并且很难做到灵活性，这里可以使用 Element.matches API 来匹配；
JavaScript设计模式之代理模式
01-31
代理，顾名思义就是帮助别人做事，GoF对代理模式的定义如下：代理模式(Proxy)，为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象：文件，资源，内存...
JavaScript——委托模式
Mr.ShyZhang趟过的前端“小路坑”
05-26 736
想实现一个效果① 点击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...
JS设计模式之委托模式
Soler_lia的博客
04-28 502
委托模式：多个对象接收并处理同意请求，他们将请求委托给另一个对象统一处理请求。 （例）一无序列表，点击li元素当前元素发生一系列改变。 ul.onclick = function(){ var e = e || window.event; tar = e.target || e.srcElement; if(tar.nodeName.toL...
JS事件委托模式
qq_38861711的博客
07-03 194
JS设计模式
js设计模式之委托模式
业余前端的职业经历
03-17 501
委托模式:多个对象接收并处理统一请求,他们将请求委托给另一个对象统一处理请求。 乍一听委托模式没听过,不过事件委托倒是听过吧 举个例子应该就知道了 <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> </ul...
学习JavaScript设计模式之模板方法模式
10-22
模板方法模式是一种行为设计模式，它允许在定义行为的同时延迟一些具体步骤到子类中实现。这种模式在JavaScript中尤其有用，因为它可以帮助我们组织代码，减少重复，并提供了一种优雅的方式来处理共同的算法框架。 ...
JavaScript设计模式之代理模式介绍
11-30
说明：顾名思义就是用一个类来代替另一个类来执行方法功能，这个模式跟装饰模式有点相似，不一样的是，代理模式是代替客户初始化被代理对象类，而装饰模式采用接口或初装饰者参数引用的方式来执行的。 在动态面向...
javascript模式设计中文版
12-30
这本书涵盖了多种在实际开发中常用的编程模式，包括设计模式、架构模式以及一些实用的编程技巧。 首先，我们要了解JavaScript是一种动态类型的语言，它的灵活性使得在编写代码时有很多不同的方法来解决问题。设计...
javascript设计模式之委托模式
screaming_color的博客
04-23 422
假设我们有10个li,遍历绑定10个事件，那如果现在我们有100个甚至是1000个li要绑定事件该怎么办？内存是有一定限制的，大量的事件会把页面的性能拖垮。委托模式：将子元素的事件绑定在父元素上。ps:在低版本的IE里，如果给button绑定了一个事件，但之后button被删除了，由于事件没有被删除，而造成了内存泄漏，然而一个一个取消太麻烦了也许一个button绑定了多个事件遍历起来也很麻烦，所以当
JavaScript事件委托实现原理及优点进行
10-14
主要介绍了JavaScript事件委托实现原理及优点进行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript中的事件委托（event delegation）
官方推荐
08-30 8686
JavaScript中的事件委托（event delegation）
js学习笔记：对象——行为委托
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
02-06 1649
委托理论其实原型链这个机制的本质就是形成对象之间的关联关系。这样的机制更适合用委托理论而不是类的思想去思考。接下来看一个例子：首先我们要定义一个名为Task的对象，它会包含所有任务都可以使用的具体行为。我们会把特定的任务对象都关联到Task功能对象上，让它们在需要的时候可以进行委托。下面是推荐的代码形式，非常简单：Task = { setId:function(ID){this.id = I
纯js事件委托模式，委托父元素
开心大表哥
01-20 1889
1.点击前 2.点击后 内容代码： html> head> meta charset="UTF-8"> title>title> head> body> div id="article"> p>文字在这里p> div> script>
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pillow-10.4.0-cp311-cp311-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
JavaScript设计模式：理解简单工厂模式及其应用
"本文深入探讨了JavaScript中的简单工厂模式，这是一种设计模式，旨在在创建对象时减少代码的耦合性，提高灵活性。简单工厂、复杂工厂和超级工厂是工厂模式的三种主要形式，分别通过不同方式实现对象的实例化。简单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值