JavaScript 事件委托中怎么委托处理表单输入事件

在 javascript 中，可以通过将事件监听器绑定到父容器（如

）上，利用事件冒泡机制来统一处理子元素（如 ）的输入事件。具体做法是监听父元素的 input 事件，并在回调函数中通过 event.target 判断触发事件的元素是否符合预期选择器，从而执行相应的逻辑。

如何识别具体的输入元素

要准确识别是哪个输入框触发了事件，需要在事件处理函数中检查 event.target 是否匹配特定的 CSS 选择器。通常使用 matches() 方法或检查 id、name 属性来实现精确控制。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

<script> document.getElementById('myForm').addEventListener('input', function(event) { if (event.target.matches('#username')) { console.log('&#29992;&#25143;&#21517;&#36755;&#20837;:', event.target.value); } else if (event.target.matches('#email')) { console.log('&#37038;&#31665;&#36755;&#20837;:', event.target.value); } }); </script>

如何处理动态添加的表单元素

由于事件委托是基于父容器的，因此即使表单元素是动态添加到 DOM 中的，只要它们位于已绑定监听的父容器内，就能自动继承事件处理能力，无需为每个新元素单独绑定监听器。

添加输入框 <script> document.getElementById('dynamicForm').addEventListener('input', function(event) { if (event.target.classList.contains('dynamic-input')) { console.log('&#21160;&#24577;&#36755;&#20837;&#26694;&#20869;&#23481;:', event.target.value); } }); document.getElementById('addInput').addEventListener('click', function() { const input = document.createElement('input'); input.type = 'text'; input.className = 'dynamic-input'; input.placeholder = '&#21160;&#24577;&#36755;&#20837;'; document.getElementById('dynamicForm').appendChild(input); }); </script>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南