What Are Events In Frontend Web Development?

What Are Events In Frontend Web Development?

ยท

3 min read

"If Jane asks of me, tell her I'm sleeping." I'm fairly certain everyone has been in this situation before ๐Ÿ˜‚, it's a really awkward one especially if the person is indirectly telling you to lie ๐Ÿ˜“. By default, we typically hope Jane doesn't ask, we also don't blurt out the instruction given to us unless Jane asks. The above is a prime example of what an event is. Recall that yesterday I hinted at events when trying to explain what triggers JavaScript in my post about Document Object Model. Today we'll be looking at events as they relate to frontend web development.

It's important to firstly state that events in software development can mean different things, events in backend development have more esoteric characteristics, and I won't be getting to that today. Frontend events are easier to relate to because you can easily see them. Just like my first example above, events are instructions that are handed to the machine (web browser or server) using frontend programming languages like JavaScript, C#, etc., that will only take effect under very specific circumstances.

A man showing a little girl images on a laptop

A relatable explanation

It's easy to ask yourself the difference between conditional statements and front-end events seeing as they're both circumstance-related. Simply put, conditional statements react to data or values that can come from the computer or user inputs, while frontend events do not necessarily depend on values but on user behaviour also.

An example of a conditional statement would be a line of code that executes if an expected value is null or contains specific data, while an example of frontend events would be you clicking your mouse. Did you just have a light bulb moment? ๐Ÿ˜. Yes, those pop-up ads and pesky redirections on clickbait and insecure websites rely on frontend events to work.

A picture of a man walking a dog in a forest at dawn

Events handlers on the web

It's also important to note that events aren't monitored by just JavaScript. By convention, the web runs on HTML (HyperText Markup Language), CSS (Cascading Style Sheet) and JavaScript, other programming languages that are used in web development are translated into JavaScript before their instructions are executed on your browser.

The reason for the notice above is to enable you to understand how software engineers are able to write code in different languages and still run them on the internet, also, I wanted to bring CSS back into the conversation because CSS (the language that adds style, form, design and beauty to the web), has grown to the point where it handles events.

Picture of a girl walking with balloons

Finally

Popular events that you may have triggered are the ":hover" which is used a lot with pictures, you may have seen an image enlarge when you mouse hovers on it or some text bring out additional description when you hover on it. Another example is the ":visited" which is commonly used to change the colour of web links that you visited recently. JavaScript uses "eventListener" functions to handle events. That will be all for today, see you tomorrow ๐Ÿ˜.