在前端开发中，动态生成元素是非常常见的情况。然而，有时候我们可能会发现，这些动态生成的元素触发的事件似乎无法被事件处理程序所捕获。本文将分析这个问题的原因，并给出解决方案。
问题描述
假设我们有一个按钮，点击它可以动态地添加一些元素到页面上。我们希望这些新添加的元素也能够响应点击事件。于是我们编写了如下代码：
-- -------------------- ---- -------
------- ---------------- ----------------
---- ---------------------
--------
----- --------- - -----------------------------------
----- --------- - -------------------------------------
----------------------------------- -- -- -
----- ---------- - ------------------------------
---------------------- - ---- ---------
----------------------------------
---
----------------------------------- ------- -- -
-------------------- ---------- --------------
---
---------当我们点击“Add Element”按钮时，可以看到新的元素成功地被添加到了 #container 容器中，但是当我们点击新添加的元素时，控制台并没有输出任何信息。这就是动态生成的元素触发的事件不会被事件处理程序所捕获的问题。
事件委托
为什么会发生这种情况呢？这是因为当我们添加一个新元素时，它并没有在 container 元素上注册任何事件处理程序。因此，即使我们在 container 上绑定了事件处理程序，新添加的元素也无法响应该事件。
那么该怎么解决这个问题呢？这时候就需要用到事件委托（Event Delegation）了。所谓事件委托，就是将事件绑定在父元素上，然后通过判断事件源（即 event.target）来确定被点击的元素是否为期望的目标元素。如果是的话，就执行相应的逻辑处理。
修改上述代码如下，即可实现动态生成的元素响应点击事件：
-- -------------------- ---- -------
------- ---------------- ----------------
---- ---------------------
--------
----- --------- - -----------------------------------
----- --------- - -------------------------------------
----------------------------------- -- -- -
----- ---------- - ------------------------------
---------------------- - ---- ---------
----------------------------------
---
----------------------------------- ------- -- -
-- --------------------- --- ------ - -- ------------
-------------------- ---------- --------------
-
---
---------当我们点击新添加的元素时，可以看到控制台成功输出信息了。
总结
本文介绍了动态生成的元素触发的事件不会被事件处理程序捕获的问题，并给出了通过事件委托来解决该问题的方法。事件委托是一种非常实用的技术，在实际开发中也非常常见。希望本文能够对读者理解和掌握事件委托技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15390