Use addEventListener() Instead of onclick/oninput/onchange... Especially When Working in Teams

2 min readJul 2, 2019

Let’s think about:

addEventListener('click', …) vs onclick = …

addEventListener('input', …) vs oninput = …

addEventListener('change', …) vs onchange = …

They are basically the same events with different syntax. However, is it just another way to write, or do they actually have different behaviors deep down? Let’s get excited and find out!

In our simple test project, by convention, we first put a <div id=”root”></div> into the <body> element on index.html for JavaScript to get:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="root"></div>
    <script src="script.js"></script>
  </body>
</html>

And let’s start with the click event. In script.js, first we create two functions to log out when something is clicked:

function clickMe() {
    console.log("I'm clicked!");
}
  
function clickMeAlso() {
    console.log("I'm also clicked!");
}

Now let’s get the root element:

const root = document.getElementById("root");

Then we create and append two<button> elements (for addEventListener() and onclick events, respectively):

const onClickBtn = document.createElement("button");
onClickBtn.innerText = "onClick Button";const addListenerBtn = document.createElement("button");
addListenerBtn.innerText = "addEventListner Button";root.appendChild(onClickBtn);
root.appendChild(addListenerBtn);

Finally we attach both functions as event listeners to both buttons:

onClickBtn.onclick = clickMe;
onClickBtn.onclick = clickMeAlso;addListenerBtn.addEventListener("click", clickMe);
addListenerBtn.addEventListener("click", clickMeAlso);

Now it’s time to open index.html and test! I’ve embedded a Repl below:

As a result, in the console:

When we click the onClick Button, only `I’m also clicked!` is logged out
When we click the addEventListner Button, both `I’m clicked!` and `I’m also clicked!` are logged out

(As a side note, I also ran the same test for change , input events, and the results were consistent with the above findings. To save reading time, I don’t put them here, but feel free to test out if you’d like to!)

To conclude, although we can attach the same event with different syntax, using addEventListener(‘click’, …) we can have multiple listeners on one event, whereas using onclick we can only assign one listener to one event (which is always the latest assigned listener).

Important Final thoughts about the findings:

Think about today’s software development setup in a company: either we add features and functionalities(with bug fixing) on existing applications, or collaborate in a team to create new applications.

Now, since using addEventListener() doesn’t replace other listeners attached on the same event, it is much safer to use this than the onclick/oninput/onchange… event, as we won’t accidentally replace someone else’s previously attached listeners, and that also makes debugging more efficient and happy. :sunglasses:

Use addEventListener() Instead of onclick/oninput/onchange... Especially When Working in Teams

Important Final thoughts about the findings:

Written by Shun Yao