JavaScripts Event Listeners
JavaScript is a powerful web programming language with many tools to execute desired tasks in an application. Just like many other languages JavaScript can be a bit difficult to understand at first so of course with much practice and repetition it’ll all come. Trust me I’m still learning…only the beginning. Coming from just learning Ruby and Rails consecutively, JavaScript is like magic in a sense that you start to realize how the functionality of an app is working behind the scenes.
The possibilities are endless. It can achieve tasks that normally would require having to redirect to another page in Ruby. For instance when I was working on my Mod 2 project in Flatiron Academy. The website I was working on had a comment section under a specific ride. Where the user was able to leave a comment and a rating. In order to do so they have to click a link which redirects the user to a form. When submitted the user was redirected back to the show page for that ride. Doing so refreshed the page so the comment was visibly seen.
This can be frustrating because as you have seen with today’s applications such as Instagram, Facebook, YouTube, etc. You are able to comment on a post and view it instantaneously. Almost like no visible process was done besides typing it in and sending it in. This is where Event Listeners come in! An Event Listener is a method “.addEventListener()” which does exactly as it sounds. The application waits for a specified event to occur on an element within your HTML. As well as any DOM(Document Object Model) Object. Events can range from a ‘click’, ‘submit’, ‘mouseover’ and many more. We’ll go over some, but you can visit the documentation here.
These events can handle different situations that the developer would like to accomplish. The setup of an Event Listener looks like so…. ( “element.addEventListener(‘event’, e =>{ .
The first section “element” is where your specified element would go which is where you want your event to take place… like a button element. The second is telling the document to listen to an event on that element. That event is specified within the parentheses (‘event’). Following after is the “e” which the target that will lead into a function that will step by step tell the listener what goals to achieve. That “e”(target) will then be assigned to constant Ex. “const button = e.target”. Making it possible to later achieve the goal at hand with the event depending on what is needed to get there. Especially great for event bInevitably event handlers will be executing some type of request. Following Restful routing conventions for what is needed.
List of some useful Event Listeners
Click
- The event for a click is exactly how it sounds…the document listens for a ‘click’ on the page. This can lead to a variety of outcomes depending on what is desired. The infamous “Like” button..whether it be a heart on Instagram or a “Like Button” on facebook is a good example. As well as clicking an image of a dog which in turn its main function within the event is to GET the dogs information in order to be displayed on the DOM.
Submit
- This event is mostly always on a form. The document listens for the ‘submit’ button to be pressed then it performs the function declared within the event. Forms will usually make a “POST” request to create or a “PATCH” in order to update/edit data that already exists within an object. This will also render itself to the DOM if directed to.
Dblclick
- The doubleclick event activates after two ‘clicks’ are heard on an element that is selected. With this event it is required to have two pairs of ‘mouseup’ and ‘mousedown’ events following. We see this when we want to open a specific file within our computers. That event is telling the document to perform whatever task that is desired.
Drag
- The ‘drag’ event is when a targeted element is clicked on and dragged.
Keydown
- The ‘keydown’ is an event that occurs when a key is pressed. Within this listener you are able to specify which keys to listen for and assign those keys to an action.
MouseOver
- The ‘mouseover’ event occurs when the cursor goes onto the element.
This is list is just a few events that JavaScript handles. Plus many more that each of the events listed here work with as well. So it’s always interesting to experiment with different handlers and see how they work. Doing so you start to think about the functionality of other app like liking another photo on instagram!
Resources:
