Как правильно использовать делегирование событий вместо добавления второго одновременного прослушивателя событий для того же типа событий?

function nameInputRestrictor(event) {
  const input = event.target;
  const char = String.fromCharCode(event.which);

  // Prevent first character from being a space
  if (input.selectionStart === 0 && event.code === "Space") {
    event.preventDefault();
    return;
  }

  // Prevent first character from being a non-letter
  if (input.selectionStart === 0 && !/^[a-zA-Z]$/.test(char)) {
    event.preventDefault();
    return;
  }

  // Prevent consecutive spaces
  const lastChar = input.value.charAt(input.selectionStart - 1);
  if (char === " " && lastChar === " ") {
    event.preventDefault();
    return;
  }
}

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll("input[name='real_name'], input[name='display_name']").forEach(input => {
    input.addEventListener("keypress", nameInputRestrictor);
  });
});

label {
  display: block;
} 

<form>
  <label>
    Real name: <input type = "text" name = "real_name" required />
  </label>
  <label>
    Display name: <input type = "text" name = "display_name" required />
  </label>
  <label>
    Email: <input type = "email" name = "email" required />
  </label>
  
  <button type = "submit">Submit</button>
</form>

function handleNameFieldKeypress(target, evt) {
  console.info('handleNameFieldKeypress ... target ...', target);

  const char = String.fromCharCode(evt.which);

  const { selectionStart } = target;

  const isNotValid = (selectionStart === 0 && (

    evt.code === 'Space' ||
    !/^[a-zA-Z]$/.test(char)

  )) || (

    char === ' ' &&
    target.value.charAt(selectionStart - 1) === ' '
  );
  if (isNotValid) {

    evt.preventDefault();
  }
}
function handleEmailFieldKeypress(target, evt) {
  console.info('handleEmailFieldKeypress ... target ...', target);

  const { selectionStart } = target;

  const isNotValid =
    (selectionStart === 0 && evt.code === 'Space') || (

      String.fromCharCode(evt.which) === '@' &&
      target.value.charAt(selectionStart - 1) === '@'
    );

  if (isNotValid) {
    evt.preventDefault();

    return;
  }
  const key = evt.keyCode || evt.charCode || evt.which;

  return (key !== 32) && key;
}

function handleInputFieldKeypress(evt) {
  const { target } = evt;

  let result;

  if (target.matches('input[name = "real_name"], input[name = "display_name"]')) {

    result = handleNameFieldKeypress(target, evt);

  } else if (target.matches('input[name = "email"]')) {

    result = handleEmailFieldKeypress(target, evt);
  }
  return result;
}

document
  .addEventListener('DOMContentLoaded', () => {

    document
      .querySelector('form')
      .addEventListener('keypress', handleInputFieldKeypress);
  });

body { margin: 0; }
form { width: 32%; }
fieldset { margin: 0 0 8px 0; }
label, label > span { display: block; }
label > span { margin: 4px 0 2px 0; }
/*
input[name = "email"],
input[name = "real_name"],
input[name = "display_name"] { text-transform: capitalize; }
*/
.as-console-wrapper { left: auto!important; width: 66%; min-height: 100%; }

<form>
  <fieldset>
    <legend>User Data</legend>
  
    <label>
      <span>Real Name</span>
      <input type = "text" name = "real_name" />
    </label>
  
    <label>
      <span>Display Name</span>
      <input type = "text" name = "display_name" />
    </label>

  </fieldset>
  <fieldset>
  
    <label>
      <span>E-mail Address</span>
      <input type = "email" name = "email" />
    </label>

  </fieldset>
</form>

<!--
<script>

// - one does not even need a 'DOMContentLoaded' event listener
//   for dealing with input-element related 'keypress' events,
//   as long as the element-query starts after the targeted
//   element/s have been made accessible within the DOM.

function handleNameFieldKeypress(target, evt) {
  console.info('handleNameFieldKeypress ... target ...', target);

  const char = String.fromCharCode(evt.which);

  const { selectionStart } = target;

  const isNotValid = (selectionStart === 0 && (

    evt.code === 'Space' ||
    !/^[a-zA-Z]$/.test(char)

  )) || (

    char === ' ' &&
    target.value.charAt(selectionStart - 1) === ' '
  );
  if (isNotValid) {

    evt.preventDefault();
  }
}
function handleEmailFieldKeypress(target, evt) {
  console.info('handleEmailFieldKeypress ... target ...', target);

  const { selectionStart } = target;

  const isNotValid =
    (selectionStart === 0 && evt.code === 'Space') || (

      String.fromCharCode(evt.which) === '@' &&
      target.value.charAt(selectionStart - 1) === '@'
    );

  if (isNotValid) {
    evt.preventDefault();

    return;
  }
  const key = evt.keyCode || evt.charCode || evt.which;

  return (key !== 32) && key;
}

function handleInputFieldKeypress(evt) {
  const { target } = evt;

  let result;

  if (target.matches('input[name = "real_name"], input[name = "display_name"]')) {

    result = handleNameFieldKeypress(target, evt);

  } else if (target.matches('input[name = "email"]')) {

    result = handleEmailFieldKeypress(target, evt);
  }
  return result;
}
document
  .querySelector('form')
  .addEventListener('keypress', handleInputFieldKeypress);

</script>
//-->