JavaScript trigger event.

This tutorial aims to demonstrate how to create, trigger and change HTML events using JavaScript.

Before diving into how we can do that, let’s first define an event.

What is an HTML Event?

An HTML event is an action that occurs as a result of a user interacting with an element on a web page, such as clicking a button or hovering over a hyperlink. When an event occurs, the browser executes a function associated with the event, known as an event handler.

JavaScript event handlers handle html events, and they are triggered when the user or the browser does something. JavaScript event handlers can handle and verify user inputs, user actions, and browser actions.

Common HTML Events

Some typical HTML events include:

• Onload - this event is triggered when the HTML page loads on a browser.
• Onclick - this event happens when the mouse is clicked.
• Mouseover - this event is triggered when the mouse hovers over an object.
• Mouseout - this event is triggered when the mouse is hovered out of an object.
• Onchange - this event is triggered when an HTML element is changed.
• Onkeydown - this event is triggered when a keyboard key is pushed.

Now that we have discovered a few common triggers let us discuss two ways we can trigger an HTML event using JavaScript.

Method 1 - Using the addEventListener() Function

The addEventListener function is a method that is used to attach an event handler to an element in an HTML document. It is a part of the DOM (Document Object Model) API, and is commonly used in JavaScript to add interactivity to web pages.

Syntax:

element.addEventListener(event, handler, options);

• element is the element to which the event handler is being attached.
• event is the event’s name, such as “click” or “submit.”
• handler is the function that will be executed when the event occurs.
• options is an optional parameter that can specify additional options for the event listener, such as whether the event should be captured or bubbled.

Example javascript code:

var button = document.querySelector('button');

button.addEventListener('click', function() {
  alert('You clicked me!');
});

In this example, an alert dialog box with the message “You clicked me” will be displayed when the button is clicked.

Example 2

We can also use JavaScript events to modify the styling of an element as demonstrated in the example below:

var button = document.querySelector('button');

button.addEventListener("click", function color() {
    document.querySelector("button").style.backgroundColor="blue";
});

The example code above adds an event listener to a button element. The event listener listens for a “click” event, and when the event occurs, it executes a function called color.

The color function sets the background color of the button element to blue using the style.backgroundColor property.

In this case, the code above will cause the button to turn blue when clicked. If the button is clicked again, it will remain blue.

To reset the button’s color to its original state, you could add another event listener for the “click” event or add a separate button to reset the color.

document.getElementById("btn").addEventListener("click", function color() {
  if (this.style.backgroundColor === "blue") {
    this.style.backgroundColor = "";
  } else {
    this.style.backgroundColor = "blue";
  }
});

In this example, the function checks the current value of the style.backgroundColor property. If it is “blue,” it sets the value to an empty string (which will reset the color to its original state), and if it is not “blue,” it sets the value to “blue.” This will cause the button to toggle between its original color and blue each time it is clicked.

Method 2 - Using HTML Event Attribute

An HTML event attribute is a special attribute that is used to specify a function that should be executed when a specific event occurs on an HTML element. The function is known as an event handler.

To use an HTML event attribute, you simply specify the event’s name and the function that should be executed when the event occurs as the attribute’s value.

For example, the onclick attribute can be used to specify a function that should be executed when the element is clicked. The onmouseover attribute can be used to specify a function that should be executed when the mouse pointer moves over the element.

To use an HTML event attribute to trigger an event, you can specify the event and the event handler function using an attribute on an HTML element.

Example:

<button onclick="alert('You clicked me!')">Click me</button>

In this example, the onclick attribute is used to specify a function that will be executed when the button is clicked. When the button is clicked, an alert dialog box with the message “You clicked me!” will be displayed.

You can use any valid HTML event attribute to trigger an event. Some common examples include onload, onmouseover, onfocus, and onsubmit.

An example is as shown below:

<body onload="alert('Page has finished loading!')">
  ...
</body>

In this case, an alert dialog box with the message “Page has finished loading!” will be displayed when the page finishes loading.

Note: It’s worth keeping in mind that while HTML event attributes are easy to use, they are generally not considered the best practice for adding interactivity to web pages.

Instead, we recommended using JavaScript and the addEventListener function to attach event handlers to elements. This allows for more flexibility and separation of concerns, as the HTML markup is not cluttered with event-handling logic.

Conclusion

In this post, you discovered what is an HTML event, common types of events, and how to use the JavaScript addEventListener() function and HTML Event Attributes to trigger events in DOM Elements.

We hope you enjoyed this post; leave us a comment if you did, and let us know how we can improve.