首页 > 编程语言 >JavaScript 中的闭包和事件委托

JavaScript 中的闭包和事件委托

时间:2024-08-05 17:25:21浏览次数:17  
标签:闭包 function 元素 委托 作用域 JavaScript 事件 监听器

包 (Closures)

闭包是 JavaScript 中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕。闭包可以帮助我们实现数据的私有化、封装和模块化,使代码更简洁、易读和可维护。

闭包的定义

简单来说,闭包是指有权访问另一个函数作用域中变量的函数。

function outerFunction() {
    let outerVariable = "I am outside!";

    function innerFunction() {
        console.log(outerVariable); // innerFunction 可以访问 outerVariable
    }

    return innerFunction;
}

const closure = outerFunction();
closure(); // 输出: I am outside!

在上述例子中,innerFunction 就是一个闭包,它可以访问 outerFunction 中的 outerVariable,即使 outerFunction 已经执行完毕。

闭包的应用

  1. 数据私有化

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
console.log(counter()); // 输出: 3

在这个例子中,count 变量被封装在 createCounter 函数的作用域内,只能通过返回的闭包函数进行访问和修改。

  1. 模拟块级作用域

在 ES6 之前,JavaScript 没有块级作用域,我们可以使用闭包来模拟块级作用域。

for (var i = 1; i <= 3; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}
// 输出: 1, 2, 3 (每隔一秒输出一个数字)

通过立即执行函数表达式 (IIFE),为每次循环创建了一个新的作用域,从而使 setTimeout 中的 i 保持正确的值。

事件委托 (Event Delegation)

事件委托是一种利用事件冒泡机制,将事件监听器添加到父元素上,从而管理多个子元素事件处理的一种技术。它可以减少内存占用,提高性能,特别是在需要处理大量动态生成的子元素事件时非常有用。

事件委托的定义

通过将事件监听器添加到父元素上,当子元素的事件被触发时,事件会冒泡到父元素,由父元素的事件监听器进行处理。

<ul id="parent">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log(event.target.innerText); // 输出点击的列表项的文本
    }
});

在这个例子中,我们只为 ul 元素添加了一个点击事件监听器,但可以处理所有 li 元素的点击事件。

事件委托的应用

  1. 动态内容

当页面上有大量动态生成的元素时,使用事件委托可以简化事件处理。

const list = document.getElementById('parent');
document.getElementById('addItem').addEventListener('click', function() {
    const newItem = document.createElement('li');
    newItem.innerText = `Item ${list.children.length + 1}`;
    list.appendChild(newItem);
});

  1. 提高性能

当需要为大量元素添加事件监听器时,事件委托可以显著提高性能,因为只需要为父元素添加一个事件监听器,而不是为每个子元素添加。

<button id="addItem">Add Item</button>
<ul id="parent">
    <!-- 动态生成的列表项 -->
</ul>

总结

闭包能够访问外部函数作用域中的变量,从而实现数据私有化和封装;

事件委托利用事件冒泡机制,通过将事件监听器添加到父元素上,简化了事件处理,提高了性能。

文章转载自:最小生成树

原文链接:https://www.cnblogs.com/zx618/p/18339486

体验地址:引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

标签:闭包,function,元素,委托,作用域,JavaScript,事件,监听器
From: https://blog.csdn.net/dsgdauigfs/article/details/140926721

相关文章

  • 我可以将 Python 与 javascript 结合起来用于网站或应用程序吗
    我不知道如果j添加Python和javascript可以吗我尝试过。但决定在继续之前询问一下是否可以继续但是如果我只使用javascript还是只使用python会更好吗?我只需要建议或答案将Python与Javascript结合用于网站或应用程序不仅完全可行,而且也是一种非常常见的做法!二者......
  • Python 网络抓取与请求和美丽的汤被需要 javascript 阻止
    我正在尝试从网站上抓取文本。我使用简单的代码:requests.get(url_here)。我的代码直到最近才有效。现在,当我使用请求时,我收到一条消息,而不是获取网站的文本:“该网站需要启用JavaScript!您使用的浏览器不支持JavaScript,或者已关闭JavaScript。“我已验证我的浏览器确实......
  • C++11 中的闭包
    什么是闭包?闭包是一种可以捕获其创建环境中的变量的函数。闭包允许函数在离开其创建环境后仍然访问和操作这些变量。Lambda表达式lambda表达式的基本语法如下:[capture](parameters)->return_type{//functionbody};capture:指定哪些外部变量可以在lambda表达式中......
  • 8.初始JavaScript
    初始JavaScript1.什么是JavaScriptjavascript能做什么: 1.网页的动态效果 2.前后端交互--数据提交(弹窗/输入框/监听实践) 3.进阶--前端高级框架(Vue,jsReact.jsNode.js) 2.JavaScript的组成js的书写方式和css类似,也有内部写法和外部写法 内部写法和html中,写一对script标......
  • ECharts与数据可视化:如何高效使用JavaScript实现复杂图表
    ECharts与数据可视化:如何高效使用JavaScript实现复杂图表大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!在现代网页开发中,数据可视化已成为展示复杂数据的关键手段。ECharts是一个强大的JavaScript图表库,可以帮助开发者轻松实现各种复杂的图表。本文......
  • JavaScript基础语法
    第一章JavaScript基础语法一、字面量(编程语言中的固定量)1.数字(Number)可以为整数,小数,科学计数(e)等等2.字符串(String)3.表达式用于计算的固定值。3+2.2,3.14*2等4.数组(Array)5.对象(Object)定义一个对象在JavaScript中,对象(Object)是一种复杂的数据类型,用于存储键值对(key-v......
  • 2--Web前端开发-JavaScript
    引入方式1、内部脚本:将JS代码定义在HTML页面中JavaScript代码必须位于<script></script>标签之间在HTML文档中,可以在任意地方,放置任意数量的<script>一般会把脚本置于<body>元素的底部,可以改善显示速度<script>alert("hellojavascript");</script>可放在代码中任意位......
  • JavaScript之ECMAScript(二)
    三、ECMAScript基础(一)函数1.函数的定义函数指能实现特定功能的代码块,通常使用function(){}进行函数的定义2.函数的三种定义形式2.1使用function关键字定义使用function函数名(){函数体}进行定义,使用“函数名()”进行调用。2.1使用var关键字定义使用va......
  • JavaScript Proxy() 构造函数、Proxy对象
    Proxy()构造函数Proxy()构造函数用于创建Proxy对象。语法newProxy(target,handler)可以使用Proxy()构造函数来创建一个新的Proxy对象。构造函数接收两个必须的参数:target是要创建的对象,即要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数......
  • JavaScript 中 arguments 对象与剩余参数的对比及转换
    引言在JavaScript中,处理函数调用时传递的不同数量的参数是一项常见的任务。为此,JavaScript提供了两种不同的方法:arguments对象和剩余参数(RestParameters)。本文将探讨这两种方法的区别,并介绍如何将arguments对象转换为真正的数组。arguments对象vs.剩余参数arguments......