Javascript Event Listener

So far, not much - something that happens. Our web page contains a button which should do something when our button is clicked. When we click on our button, nothing happens. This is because we still have to write our event handler.

In the main.js file, paste the following code:

This code will find the element with the id " submitted " and change its content to " Form submitted." " This code will only be executed when our submitForm () is called. This is programmed to happen when the user clicks our button.

When we click on our button, the following happens:

As you can see, our message appears. We used an online event manager to make our web page interactive. But inline event handlers aren’t the only way to use events in JavaScript. Let’s see how to use the event handler property in our code.

Events with handler properties

In an inline handler, you need to specify the function you want to perform in your HTML file. In our HTML code from earlier, this line is where we defined the function we wanted to call when our button was pressed:

Using the properties of the handler, we can remove the command from our code’s "onclick" event . This allows us to move all the JavaScript that makes our web page interactive into its own file. For this example, we’re going to give our button the "button" ID, so that we can identify our button in the JavaScript code. We remove the onclick event and assign an identifier to our button:

To trigger our event when the button is pressed, we’ll write an event with a handler property inside our "main." js " . Here is the code we will use:

When you run this code and click on the button, the following message is returned: