Skip to main content

Events in JavaScript

HTML DOM (Document Object Model) events are actions or occurrences that happen in a web page and can be detected by JavaScript code.

These events can be user-initiated, such as clicking a button or hovering over an element, or they can be triggered by the browser or the document itself, such as when the page finishes loading.

First let's look at some of the most common HTML DOM events that you can use in your web pages.

  • onclick: - occurs when an element is clicked
  • onmouseover: - occurs when the mouse cursor is over an element
  • onmouseout: - occurs when the mouse cursor leaves an element
  • onkeydown: - occurs when a key is pressed down
  • onkeyup: - occurs when a key is released
  • onload: - occurs when the document finishes loading
  • onunload: - occurs when the user leaves the page

To use these events, you can add event listeners to HTML elements using JavaScript code.

As an example:

<button id="myButton">Click me</button>
<script>
  document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
  };
</script>

In this example:

  • This code adds an onclick event listener to the button element with the ID "myButton".
  • When the button is clicked, the JavaScript function inside the event listener is executed, which displays an alert dialog box saying "Button clicked!".

The click Event​

The click event is an HTML DOM event that is triggered when an element is clicked.

It is used to create interactive user interfaces and provide visual feedback to the user.

You can add a click event listener to an HTML element using JavaScript.

As an example:

Editor

Loading...

In this example:

  • We have an HTML document that contains a button element with the ID "myButton" and a span element with the ID "count".
  • We also have a script element that adds a click event listener to the button element.
  • When the button is clicked, the function inside the event listener is executed, which increments a count variable and updates the innerHTML of the span element with the new count value.

The onmouseover Event​

The onmouseover event is an HTML DOM event that is triggered when the mouse cursor moves over an element.

onmouseover used to create interactive user interfaces and provide visual feedback to the user.

As an example:

Editor

Loading...

In this example:

  • We have a div element with the class "myDiv".
  • We also have a script element that adds an onmouseover event listener to the div element.
  • When the mouse cursor moves over the div element, the function inside the event listener is executed, which logs a message to the console.
  • We use CSS to change the background color of the div element when the mouse cursor hovers over it.

The onmouseout Event​

The onmouseout event is an HTML DOM event that is triggered when the mouse cursor moves out of an element.

It is the counterpart to the onmouseover event and is commonly used to create interactive user interfaces and provide visual feedback to the user.

As an example:

Editor

Loading...

In this example:

  • We have a div element with the class "myDiv".
  • We also have a script element that adds an onmouseout event listener to the div element.
  • When the mouse cursor moves out of the div element, the function inside the event listener is executed, which logs a message to the console.
  • We use CSS to change the background color of the div element when the mouse cursor hovers over it.