Events You’ll Be Seeing A Lot Of
Some reoccurring events you might run into include, mouse, form, and key stroke events. For mouse there are events like “click”, “mouseenter”, “mouseleave”, and “mousemove”. Each of which is affected by your mouse pointers interaction with the pages element. As for forms we use them when we want to receive some kind of user input. This can come from a number of things like “submit”, “focus”, or “blur” all effecting the way the input is received. Lastly key stroke events are used to handle key pressing actions like using your curser to move up and down, or just showing when a specific key is being pressed. These events include “keydown”, “keyup”, and “keypress”.
Event Handlers verify user inputs or actions and run functions as soon as the event occurs. In the case of inline event handler we add the HTML element to the index.html file!
We added our “onclick” attribute in our button tag. Now we can access that value using the “changeText()”! In the second photo we see we can now change the value of the p tag by running the “changeText()” function. While this seems cool, it isn’t the most efficient way to organize our code. To maintain relevancy and to make sure all our code is organized together, we should avoid adding these events to our index.html.
Event listeners “listen” for an event on the page, and use an “addEventListener()” method to look out for when the event occurs, as opposed to assigning it directly to the HTML element. Event listeners take in 2 parameter, the event and the callback function.
Heres a quick example of an Event listener! As a side note, I had a “p” tag in my HTML and thats what I am accessing in my call back function. The added benefit of using an event listener is that you can place multiple event listeners on the same element. Allowing for more functionality from a HTML element then if one is directly assigned to it.
Resources that are very helpful for creating events include:
HTML DOM addEventListener() Method
❮ Element Object Attach a click event to a element. When the user clicks on the button, output "Hello World" in a…