如何使用JavaScript事件委托绑定动态元素的change、blur事件

你的代码不生效和change、blur能不能做事件委托无关，核心是两个机制问题：

• blur、focus这类焦点事件默认不会向上冒泡，你写的监听默认在事件冒泡阶段触发，根本接收不到这两个事件的通知。
• 冒泡阶段的监听很容易被内部元素的e.stopPropagation()拦截，哪怕是支持冒泡的change事件，只要下层逻辑阻止了冒泡，绑定在document上的监听就无法触发。
• 你用closest做元素匹配的逻辑本身没有问题，不需要怀疑这个API的用法。

给事件监听开启捕获模式即可，也就是给addEventListener传入第三个参数为true，让监听在事件从document向下传递到目标元素的捕获阶段就触发，既可以接收到不冒泡的焦点事件，也不会被内部的阻止冒泡逻辑拦截。
优化后的完整代码如下，额外补全了select、textarea这类常用表单控件的匹配，避免漏判：

['change', 'blur', 'focus'].forEach(event => {
  document.addEventListener(event, e => {
    const $formControl = e.target.closest('.dynamic-modal form input, .dynamic-modal form select, .dynamic-modal form textarea');
    if ($formControl) {
      console.log($formControl);
      // 这里写你的业务处理逻辑
    }
  }, true); // 核心就是加这个第三个参数true
});

• 捕获模式的事件委托兼容性和冒泡模式完全一致，所有支持addEventListener的浏览器都可以正常使用，是处理动态表单事件委托的通用方案。
• 如果不需要监听focus事件，直接删掉数组里的对应项即可，不影响其他逻辑。

内容的提问来源于stack exchange，提问作者dbzx10299