如何在无递归的情况下为AJAX响应绑定JS EventListeners

我现在遇到一个问题：如何为通过XHR获取并插入DOM的HTML片段重新绑定EventListeners，同时避免递归调用。以下是简化后的代码示例：

首次加载的HTML结构 #

<!DOCTYPE html>
<html>
<body>

  <div id="password-change">
    <form id="password-change-form">
      <input id="new-password" type="password" name="newPassword">
      <input type="submit" value="Change">
    </form>
  </div>

  <script>new PasswordChangeForm();</script>

</body>
</html>

PasswordChangeForm类代码 #

class PasswordChangeForm {

  constructor() {
    this.initValidation();
  }

  initValidation() {

    this._form = document.querySelector("#password-change-form");
    this._fields = [
      {
        node: this._form.querySelector("#new-password"),
        validator: Validators.isValidPassword
      }
    ];

    /* Arrow function to gain access to initValidation() without extra binding effort. */
    this._relay = event => {
      event.preventDefault();

      const section = document.querySelector("#password-change");
      const form = document.querySelector("#password-change-form");

      const xhr = new XMLHttpRequest();
      const actionUrl = event.target.action;
      const payload = new FormData(form);

      const xhrLoadHandler = event => {
        section.parentNode.replaceChild(xhr.response.querySelector("#password-change"), section);

        /* !!! HERE is the root of the RECURSION problem: !!! */
        this.initValidation();  /* validation must be initialized again for the newly imported form */
      };

      xhr.addEventListener("load", xhrLoadHandler, false);
      xhr.open("POST", actionUrl, true);
      xhr.responseType = "document";
      xhr.setRequestHeader("Accept", "text/html");
      xhr.send(payload);
    };

   const formValidator = new FormValidator(this._form, this._fields, this._relay);
  }
}

FormValidator类代码 #

class FormValidator {

    constructor(form, fields, relay) {
        this._form = form;
        this._fields = fields;
        this._relay = relay;

        this.addListeners();
    }

    addListeners() {
        this._form.addEventListener("submit", event => {
            if (!this.validateForm()) {
                event.preventDefault();
                return;
            }

            this._relay(event);
        });
    }

    validateForm() {
        return true;
    }
}

当前流程与问题 #

• 实例化PasswordChangeForm并完成当前DOM的初始化
• 实例化FormValidator，传入DOM节点和_relay函数
• 校验通过后，_relay函数执行XHR请求
• 收到响应后，用新表单片段替换旧表单
• 目前通过在_relay函数内调用initValidation()重新初始化，但_relay嵌套在initValidation中，导致每次提交都会递归，膨胀调用栈
• 虽当前场景影响不大，但希望彻底消除递归

请问如何正确实现无递归的EventListeners重新绑定？

解决方案 #

方法一：事件委托（最优解） #

利用事件冒泡机制，将监听器绑定到不会被替换的父元素上，无需每次DOM更新都重新绑定监听器，彻底避免递归。

重构步骤：

1. 将表单提交监听器绑定到页面持久存在的父元素（如body或#password-change的上层容器）
2. 在监听器内判断触发事件的是否为目标表单
3. 分离字段校验与提交逻辑，仅在DOM更新后重新初始化校验规则

修改后代码示例：

PasswordChangeForm类

class PasswordChangeForm {
  constructor() {
    // 绑定持久父元素的提交监听器（仅执行一次）
    document.body.addEventListener('submit', this.handleSubmit.bind(this));
    // 初始化首次字段校验
    this.initValidation();
  }

  initValidation() {
    this._form = document.querySelector("#password-change-form");
    this._fields = [
      {
        node: this._form.querySelector("#new-password"),
        validator: Validators.isValidPassword
      }
    ];
    // 仅初始化字段校验逻辑，不绑定提交监听器
    this.formValidator = new FormValidator(this._form, this._fields);
  }

  handleSubmit(event) {
    // 过滤非目标表单的提交事件
    if (event.target.id !== 'password-change-form') return;
    
    event.preventDefault();
    // 先执行表单校验
    if (!this.formValidator.validateForm()) return;

    const section = document.querySelector("#password-change");
    const form = event.target;

    const xhr = new XMLHttpRequest();
    const actionUrl = form.action;
    const payload = new FormData(form);

    const xhrLoadHandler = () => {
      section.parentNode.replaceChild(xhr.response.querySelector("#password-change"), section);
      // 仅重新初始化字段校验，无需重新绑定提交监听器
      this.initValidation();
    };

    xhr.addEventListener("load", xhrLoadHandler, false);
    xhr.open("POST", actionUrl, true);
    xhr.responseType = "document";
    xhr.setRequestHeader("Accept", "text/html");
    xhr.send(payload);
  }
}

FormValidator类

class FormValidator {
  constructor(form, fields) {
    this._form = form;
    this._fields = fields;
    this.addFieldListeners();
  }

  addFieldListeners() {
    // 仅绑定字段校验相关监听器（如输入、失焦事件）
    this._fields.forEach(field => {
      field.node.addEventListener('blur', () => this.validateField(field));
    });
  }

  validateField(field) {
    // 执行单个字段校验逻辑
    return field.validator(field.node.value);
  }

  validateForm() {
    // 校验所有字段
    return this._fields.every(field => this.validateField(field));
  }
}

方法二：分离初始化与提交逻辑 #

若不想使用事件委托，可将提交逻辑从初始化函数中抽离，避免嵌套调用导致的递归。

修改后PasswordChangeForm类代码：

class PasswordChangeForm {
  constructor() {
    this.initValidation();
    // 单独绑定提交监听器
    this.bindSubmitListener();
  }

  initValidation() {
    this._form = document.querySelector("#password-change-form");
    this._fields = [
      {
        node: this._form.querySelector("#new-password"),
        validator: Validators.isValidPassword
      }
    ];
    this.formValidator = new FormValidator(this._form, this._fields);
  }

  bindSubmitListener() {
    // 先移除旧监听器，避免重复绑定
    if (this._submitListener) {
      this._form.removeEventListener('submit', this._submitListener);
    }
    // 定义提交处理函数
    this._submitListener = (event) => {
      event.preventDefault();
      if (!this.formValidator.validateForm()) return;
      this.handleFormSubmit(event);
    };
    this._form.addEventListener('submit', this._submitListener);
  }

  handleFormSubmit(event) {
    const section = document.querySelector("#password-change");
    const form = event.target;

    const xhr = new XMLHttpRequest();
    const actionUrl = form.action;
    const payload = new FormData(form);

    const xhrLoadHandler = () => {
      section.parentNode.replaceChild(xhr.response.querySelector("#password-change"), section);
      // 重新初始化校验并绑定新监听器（无递归）
      this.initValidation();
      this.bindSubmitListener();
    };

    xhr.addEventListener("load", xhrLoadHandler, false);
    xhr.open("POST", actionUrl, true);
    xhr.responseType = "document";
    xhr.setRequestHeader("Accept", "text/html");
    xhr.send(payload);
  }
}

关键要点 #

• 事件委托是最优方案：仅绑定一次监听器，性能更优，无需处理重复绑定问题
• 若需手动绑定监听器，务必先移除旧监听器，避免同一事件多次触发
• 分离初始化与业务逻辑，避免函数嵌套调用导致的递归问题

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