0

I want to add an event listener to an HTML element which replaces the default behavior by custom behavior. I know two different ways of adding event listeners: (1) use the JavaScript function addEventListener to add an event to a DOM element:

<form class="my-form">
  <input type="submit"/>
</form>
<script>
  document.querySelectorAll(".my-form").forEach(form => {
    form.addEventListener("submit", doSomething);
  });
  function doSomething(e) {
    e.preventDefault();
    console.log("Data received");
  }
</script>

(2) use the HTML attributes on*:

<form onsubmit="doSomething()">
  <input type="submit"/>
</form>
<script>
  function doSomething(e) {
    e.preventDefault();
    console.log("Data received");
  }
</script>

However, the first one does what it should do, the second one doesn't. The second code still uses the default submit handler. So, I'm wondering whether the behavior of the first example can be achieved with HTML attributes. And besides, I would like to know which way of adding event handlers is generally preferred.

1
  • The event object doesn't get passed to inline event listeners. Thus you cannot call e.preventDefault in it.
    – connexo
    Nov 16, 2021 at 10:05

2 Answers 2

3

In the second case you're calling doSomething() with no argument, so e will be undefined. You need to pass the event as an argument explicitly:

<form onsubmit="doSomething(event)">
3
  • So, event is a valid variable inside the onsubmit attribute? Nov 16, 2021 at 7:19
  • 1
    Yes. You can use event and this.
    – Barmar
    Nov 16, 2021 at 7:20
  • I see. Thank you. Nov 16, 2021 at 7:22
2

Use the first version - but dont use querySelectorAll if you only have one form. If you have only one form, give it an ID and use document.getElementById instead.

If you have many, I would delegate:

<div id="formContainer">
  <form class="my-form">
    <input type="submit"/>
  </form>
  <form class="my-form">
    <input type="submit"/>
  </form>
</div>
<script>
  document.getElementById("formContainer").addEventListener("submit", function(e) {
    e.preventDefault();
    console.log("Data received");
  });

</script>

To do the second, we used to do this in the previous millenium

<form onsubmit="return doSomething()">
  <input type="submit"/>
</form>
<script>
  function doSomething() {
    console.log("Data received");
    return false
  }
</script>

but it is not recommended

2
  • Thanks for your answer. Some time ago, I think I have read that one should prefer using CSS selectors over IDs. Apart from probably performance benefits, does document.getElementById has more to offer? Nov 16, 2021 at 7:21
  • It makes more sense. It tells us you have ONE specific element on the page. If you use a forEach on a querySelectorAll, it will work on one OR multiple elements but I would also EXPECT multiple elements if I read it. And yes, it is faster to use getElementById
    – mplungjan
    Nov 16, 2021 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.