如何通过JavaScript事件委托实现长尾关键词点击事件处理？

本文共计1160个文字，预计阅读时间需要5分钟。

目录 + 简介 + 示例：- 事件委托 + 写法1：事件委托 + 写法2：绑定事件到每个元素- 新增元素 + 写法1：事件委托 + 写法2：绑定事件到每个元素 + 简介 + 说明 + 文本用例介绍JavaScript中的事件

目录

• 简介
• 示例：事件委托
• 写法1：事件委托
• 写法2：每个子元素都绑定事件
• 示例：新增元素
• 写法1：事件委托
• 写法2：每个子元素都绑定事件

简介

说明

本文用示例介绍JavaScript中的事件（Event）的委托（代理）的用法。

事件委托简介

事件委托，也叫事件代理，是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素，让外层元素担当事件监听的职务。

事件代理的原理是DOM元素的事件冒泡。

事件委托的优点

1.节省内存，减少事件的绑定

原本需要绑定在所有子元素的事件，使用事件委托之后，只需要一个事件绑定即可。

2.可以动态绑定事件，新增的子对象事件可以被已绑定的事件处理

因为新增的子对象产生的事件，最终也会冒泡到父元素，从而能够处理

示例：事件委托

需求：一个列表，点击列表元素时弹出其内容。