Learning JavaScript: "addEventListener"

My name is Meghan and I have been working for Amazon for 2 years now. This job has been a positive experience as I have been able to pursue my education at no cost. I was first introduced to Software Engineering when I saw a post at work for a program that would train you to become a Software Engineer called ATA.

I began doing research in SE and other careers in Tech and became fascinated with the field. I believe a career in Tech would be a perfect fit for me! Unfortunately, I was not able to pass the exam in order to be accepted into the program. Still determined, I looked into certifications through the Amazon Career Choice Program. I came across Flatiron School and decided to apply!

I have enjoyed my experience learning how to code thus far. It has been challenging at times but when the solution finally comes through to me, it is such a rewarding feeling.

The most interesting thing that I have learned so far is addEventListener. This method allows for an event to happen that is called in a function. Events are actions made by the user or browser such as pressing play on a video or clicking a link which directs you to another page. There are so may events to choose from to make your browser interactive and entertaining! Below are just a few examples:

• click
• blur
• mouseover
• keyup
• keydown
• cut
• copy
• paste

addEventListener consists of 2 parameters: the event (defines the event name) and the function(responds to the event). Lets take a look at an example:

document.addEventListener("click", sayHello);

function sayHello() {
    alert ("Hello!")
}

In this example, the event is "click" and the function is sayHello. When the function is called through the event, the results would be "Hello". Also, document is a target parameter in which the event listener will be executed. These are typically HTML elements but can apply to any DOM object. This is just a simple explanation of how addEventListener works.

Resources:
https://developer.mozilla.org
https://www.w3schools.com

Comments

[Danny Engelman]

Hmm, the documentation says there are three parameters

source: developer.mozilla.org/en-US/docs/W...