在前端开发中，我们经常需要动态地向页面添加新的元素。这些元素通常是通过 JavaScript 代码创建的，并且需要与用户进行交互。为了能够响应用户的操作，我们需要在这些动态创建的元素上添加事件监听器。
添加事件监听器的基本方法
添加事件监听器的基本语法如下：
element.addEventListener(event, function, useCapture);
其中，element 表示要添加事件监听器的元素；event 是要监听的事件名称（比如 click、keydown 等）；function 是事件触发时要执行的函数；useCapture 是一个布尔值，表示事件是在捕获阶段还是冒泡阶段处理，默认为 false（即在冒泡阶段处理事件）。
例如，以下代码可以在页面加载完成后向按钮添加点击事件监听器：
-- -------------------- ---- -------
------- ---------------------------
--------
------------- - ---------- -
--- ------ - ------------------------------------
-------------------------------- ---------- -
------------- ---------
---
--
---------在这个例子中，我们使用 document.getElementById() 方法获取到 id 为 myButton 的按钮，并使用 addEventListener() 方法向它添加了一个 click 事件监听器。当用户单击该按钮时，就会弹出一个对话框，显示消息 "Hello, world!"。
动态创建元素的事件监听器
但是，当我们使用 JavaScript 动态创建元素时，情况会稍微复杂一些。如果直接按照上面的方法为动态创建的元素添加事件监听器，可能会发现监听器没有生效。
这是因为，addEventListener() 方法只能在页面加载完成之后才能生效。当我们动态创建元素时，它们还没有被添加到页面中，因此无法直接向它们添加事件监听器。
解决这个问题的方法有很多种，下面介绍两种常用的方法。
1. 在父元素上代理事件
通过在父元素上代理子元素的事件，可以使代码更加简洁，并且不需要额外处理新创建的元素。
例如，以下代码可以在一个 <ul> 列表中的各个 <li> 元素上添加点击事件监听器：
-- -------------------- ---- -------
--- ------------
------------
------------
------------
-----
--------
--- ---- - ----------------------------------
------------------------------ --------------- -
-- ---------------------- --- ----- -
----------- - - ------------------------
-
---
---------在这个例子中，我们使用 getElementById() 方法获取到 id 为 myList 的 <ul> 元素，并使用 addEventListener() 方法向它添加了一个 click 事件监听器。当用户单击列表中的任意一个 <li> 元素时，就会弹出一个对话框，显示该元素的文本内容。
在事件监听器函数中，我们使用 event.target 属性获取到触发事件的目标元素。如果该元素是一个 <li> 元素，就执行相应的操作。
这种方法可以处理动态创建的元素，因为它们同样也是被包含在父元素中的节点。
2. 在新元素上添加事件监听器后再将其添加到页面中
通过在新元素上添加事件监听器，然后再将它添加到页面中，可以使代码更加灵活，并且可以针对特定的元素进行定制化的监听器设置。
例如，以下代码可以动态地向页面添加一个新的按钮，并在点击该按钮时弹出一个对话框：
<button id="addButton">添加按钮</button> <script> var > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/27001) ，转载请注明来源 [https://www.javascriptcn.com/post/27001](https://www.javascriptcn.com/post/27001)