What Actually Happens When You Click a Button on a Website?
By : Farah Belhamiti
We click buttons all the time,”Submit”, “Login”... but what actually happens behind the scenes?
The button is just structure:
When you write an html code like this : {
Submit
}
You’re not creating behavior, you’re just creating structure because the browser reads the html and builds something called DOM (Document Object Model),which is basically a tree that represents every element on the page. At this stage the button is just sitting there, it exists visually but it has no brain.
JavaScript gives it behavior.
When you add a javascript code like this one:{
document.querySelector("button").addEventListener("click", function() {
alert("Hello!");
});
} you’re telling the browser that if someone clicks this button , run this code and this is called event driven programming. The browser is constantly listening for events such as clicks, typing, scrolling and when something happens it reacts, that’s what makes the button alive.
The click is detected.
When you physically click, your mouse sends a signal to the system,then the browser detects it as a click event so it creates something called an event object that checks if any function is attached to that event and finally it runs the function.
All this happens in milliseconds ,behind the scenes, the browser uses something called the event loop to manage these tasks.It decides what to execute and when, so everything feels smooth.
What if the button sends data?
When you click a login button, the browser collects your information, turns it into an HTTP request, and sends it to a server. The server checks your data, sends back a response, and the browser updates the page. So you’re not logging in on your own computer, you're communicating with another machine somewhere in the world, and it all happens in just milliseconds.
When you click a button, you’re triggering so many functions and all of it happens so fast that it feels invisible.That's what I love about programming, what looks simple on the surface usually hides a whole system underneath.