Javascript is one of the most popular languages in the world. A report by W3 Technology Surveys found that over 95% of all websites on the use JavaScript for functionality and design. Massively popular websites with billions of users such as Google, Facebook and Youtube all use Javascript as a programming language.
Javascript, HTML, & CSS Relationship
Javascript allows for the addition of interactive and dynamic functionality on a webpage through. This is done through event handling, and event listeners. Before diving into event listeners, it is to ground ourselves in the relationship between HTML, CSS and Javascript, and how this serves as an important foundation for how event listeners operate.
A quick breakdown of relationship can be seen as:
- The HTML file acts as the structure of the webpage. Many times, HTML is compared to a frame and foundation of a building.
- The CSS file works to style the page. This can include features such as changing positioning of elements, colors, size, and more.
- The JavaScript file works to determine the interactions of the elements on the page. This can be triggered by listening to events (why this part is important) that can include clicking, key presses, hovering or other types of actions that the browser can listen for. Javascript is what gives functionality to the webpage.
Event Listeners
Event listeners are features and functionality in Javascript that are occurrences that “fires” off in your code when initiated by some signal. As mentioned above in the relationships with CSS and HTML, Javascript allows for functionality, and event listeners. The Mozilla Developer Network (MDN) has a great resource of common event occurrences, link here.
In our course, we have used “click” as one of the most common event occurrences that listens for mouse click on a specific element.
Syntax for Event Listeners
The syntax for adding an event listener is by using the addEventListener() method to a specific HTML element. This can be done in several ways. You can be done by identifying and creating a variable for a specific HTML element, and then appending the .addEventListeners(). Word of advice, make sure the syntax follows camel case —this can be tricky!
function sayHi(){console.log(“Hi”)}
const element = document.getElementById(“button”) element.addEventListener(“click”, sayHi);
Breaking down the code above:
- Created a function called SayHi, which console.logs the string “Hi”
- We created a variable called “element”, that would store the element that was selected on the document called “button”.
- Adding the .addEventListener() function, with the parameters of event — in this “click”, and the second parameter being the function — in this case the sayHi function that was defined before. There is also a third parameter for useCapture, but for the scope of this post we will only use the first two.
In summary, the code above on the Javascript File would create the function that when called would console.log the string “Hi”. Next, we create an element variable and assign it to store the ID of the element of the document labeled “button”.
So at this point, we created a function that will console.log a message, and we have create an element variable. What we want to do is tie these two pieces of code together, so that when the element of button is clicked, it will console.log the message “Hi” to the console.
This is where we introduce the .addEventListener function. We add the function to the specific element variable, so that the Add Event function is called upon that specific element we defined prior. The first parameter, we are going to use the keyword “click” which is a reserved string that points to the click action. Refer back to the MDN Event Reference List for more events! Next, the second parameter is the function we defined prior. For this part, we can actually define a function in line, but for the scope of this post we had a prior function we called back upon.
The final result of this code would be combining the 3 components, by clicking on the element variable with the id of button, the event listener will “listen” to the click event and fire off the function of sayHi, posting “sayHi” onto the console!
Event Listeners are a great way to add fun functionality to your webpages, and it is no surprise on why it is used by so many websites. My advice for some further reading would be to check out these links below:
- Intro to Events — MDN
- Event References — MDN
