*Click*
Front end programming can be broken into three pillars. Let’s take an example of liking a post on a social media page (we can call it FacePoke). The process of liking the post would start with a click, then the like count will go up by one to reflect your action, and finally, this will be updated on the server so that next time you visit the page, you will be able to see your like. These three steps make up the three pillars of web programming:
Recognising JS events => Clicking the button
Manipulating the DOM => Increasing the like count on the screen
Communicate with the server => Updating the server with the knowledge that you have liked a post
In this blog, I will zoom in on the first pillar: recognising JS events.
Get Sofia Fredriksson’s stories in your inbox
Join Medium for free to get updates from this writer.
Event handling refers to the browser reacting to something happening with a callback function, and as such, event listeners are made up of two things: the event, and the callback function. In order for the browser to be able to listen to events happening, you use event listeners. There are several different types of event listeners that listen for different specific actions from the user. I will go through some examples of events below, by using the Javascript Wikipedia page, some DOM manipulation and the console in Google Chrome.
Click
In this example, I query selected the header, attached an event listener to it and changed the innerText to ‘You Clicked Me’. This event listener is attached to the header element on the page, and is essentially waiting for a specific thing to happen. When that happens (in this case, clicking), it will fulfil the action that has been specified, waiting the callback function.
Submit
The submit action is mostly used to validate forms. Submit events have a default action, which is to refresh the page, and in this case I want to avoid that. This is where the preventDefault() method comes in handy. In the code below, I querySelect the search form, and the little ‘logged in status’ element at the top of the page. I add a submit event listener to the form, and as I submit my form, the text in the ‘logged in status’ element changes.
Mouseover
The mouseover event listener occurs when a mouse hovers over an element. In the example below, I query select the side bar div and upon mouse hover, change the contents to nothing.
Mousewheel
The mousewheel event listener is triggered when the mouse is scrolled. In the example below, I query select the header again, and alter the innerText, which changes when the event of scrolling happens. In this case, the target that the eventListener was attached to was the whole document as opposed to a specific element.
Overall, there are lots of ways that you can listen to events in a browser. The ones that I have made the most use of so far in my first three weeks of learning JavaScript are click and submit, however there are many more listeners available, so go explore! Here is a list of different events.
