能否阻塞执行直到所有先前注册的JavaScript事件监听器执行完毕

完全可以实现，不需要链式耦合两个模块的代码。

首先明确核心原因：浏览器原生的DOM事件机制不会等待async类型监听器返回的Promise，所有监听器的同步代码段执行完后就会继续走事件流程，不会等待内部await的异步任务结束，这就是你现在第二个监听器拿不到更新后验证码值的根源。

你只需要在所有业务模块加载前加一段公共的事件增强逻辑，两个模块的业务代码几乎不需要改动，就能实现所有异步submit监听器按注册顺序依次执行、前序全部完成后再执行后续逻辑的效果。 #

具体实现 #

第一步：加载公共增强逻辑 #

把下面这段代码放在所有业务JS文件之前加载，它会拦截表单的submit事件注册逻辑，给每个表单维护独立的监听器队列，统一做异步调度：

const originAddEvent = HTMLFormElement.prototype.addEventListener;
const formSubmitQueues = new WeakMap();

HTMLFormElement.prototype.addEventListener = function(type, handler, opts) {
  if (type !== 'submit') {
    return originAddEvent.call(this, type, handler, opts);
  }
  if (!formSubmitQueues.has(this)) {
    const queue = [];
    formSubmitQueues.set(this, queue);
    // 仅注册一个原生submit监听器做统一调度
    originAddEvent.call(this, 'submit', async (e) => {
      e.preventDefault();
      // 按注册顺序执行所有监听器，等待每个异步任务完成
      for (const fn of queue) {
        await fn(e);
      }
      // 所有逻辑跑完后，没有被阻止提交就触发原生提交
      if (!e.defaultPrevented) this.submit();
    }, opts);
  }
  formSubmitQueues.get(this).push(handler);
};

第二步：修正两个模块的代码笔误 #

你贴的原有代码存在几处语法/拼写错误，修正即可，两个模块完全不需要互相引用，逻辑保持独立：
module_a.js（验证码模块）修正后：

// 刷新验证码逻辑
form.addEventListener('submit', async (e) => {
  const { target: form } = e;
  // 注意原代码name拼写错误：是captcha不是catpcha
  const recaptchaField = form.querySelector('[name="captcha"]');
  // 模拟异步拉取验证码token
  await new Promise(resolve => setTimeout(resolve, 5000));
  recaptchaField.value = '实际获取到的验证码token';
});

module_b.js（提交模块）修正后：

// 表单提交逻辑
form.addEventListener('submit', async (e) => {
  // 公共层已经统一阻止默认提交，这里不需要重复调用e.preventDefault()
  const formData = new FormData(e.target);
  await fetch('/api/submit', { method: 'POST', body: formData });
});

注意事项 #

• 所有通过addEventListener注册的表单submit监听器，不管属于哪个模块，都会严格按照注册顺序执行，前序监听器的所有异步任务执行完成后，才会运行下一个监听器
• 如果某个监听器需要终止提交流程，只需要调用e.preventDefault()即可，调度层检测到后不会触发最终的表单提交
• 不要在业务监听器里手动调用form.submit()，否则会绕过统一调度逻辑，直接触发原生提交

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