What are JavaScript DOM Events?

In this tutorial, we will learn what JavaScript DOM Events are.

You can run JavaScript when an event occurs, such as the user clicking the mouse, loading an image, clicking on an HTML element, submitting an HTML form, and so on. The Document Object Model (DOM) includes events, and each HTML element contains a collection of events that can trigger by JavaScript code.

Each event has its unique name, such as click, mouseover, load, etc.; for use, these events on an element HTML have event attributes. The event attributes names are similar to the event name in addition to the on clause. So, for example, the event attribute of the ‘click’ event is ‘onclick’.

Users can follow the below syntax to use events with event attributes.

Syntax

<element onclick="JavaScript Code">...</element>

In the above syntax, the element represents all HTML elements such as div, span, p, etc. The ‘onclick’ is the ‘click’ event attribute. Similarly, any event attribute can use like ‘onmouseover’ or ‘onload’ etc.

JavaScript DOM Events

In the below table, we have discussed some of the most used JavaScript DOM Events and their descriptions.

Event name Description
click This event occurs when the user clicks on an element.
mouseover This event occurs when the user moves the pointer onto the element.
mouseout This event occurs when the user moves the pointer out of the element.
load This event occurs when an element has loaded.
copy This event occurs when the user copies an element’s content.
drag This event occurs when a user drags an element.
input This event occurs when the user provides user input on an element.
keypress This event occurs when the user presses a key.

Example 1

Let’s see an example, which allows you to call a function from an event handler to change the text

<!DOCTYPE html>
<html>
<body>
   <p onclick="myEvent(this)">Click me</p>
   <script>
      function myEvent(id) {
         id.innerHTML = "Welcome!";
      }
   </script>
</body>
</html>

Here we will see a few examples to understand a relation between Event and JavaScript.

Example 2

onclick Event Type

This is the most frequently used event type, which occurs when a user clicks the left button of his mouse. You can put your validation, warning etc., against this event type.

<html>
<head>
   <script>
      function sayHello() {
         alert("Hello World")
      }
   </script>
</head>
<body>
   <p>Click the following button and see result</p>
   <form>
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </form>
</body>
</html>

Example 3

onmouseover and onmouseout

These two event types will help you create nice effects with images or even with text as well. The onmouseover event triggers when you bring your mouse over any element and the onmouseout triggers when you move your mouse out from that element.

<html>
<head>
   <script>
      <!--
      function over() {
         document.write ("Mouse Over");
      }
      function out() {
         document.write ("Mouse Out");
      }

      //-->
   </script>
</head>
<body>
   <p>Bring your mouse inside the division to see the result:</p>
   <div onmouseover="over()" onmouseout="out()">
      <h2> This is inside the division </h2>
   </div>
</body>
</html>

Example 4

onclick, mouseover and mouseout events

In the below example, we have used the JavaScript DOM events to change an element’s content. We have used three events in this example: ‘click,’ ‘mouseover,’ and ‘mouseout.’ In the root element, we have used the event attributes of these three events with separate functions for each, so whenever these three events occur, their respective functions will trigger and change the content of that element. So, for example, if the ‘click’ event occurs, it will execute the ‘clickEventHandler()’ function, which will change the element’s content to ‘click event occurs!’.

<html>
<body>
   <h2>Using <i>'click', 'mouseover', and 'mouseout'</i> JavaScript DOM Events to change the content of an element 
   <h4> #NOTE: click, move the pointer over, or move the pointer out of the element to show the result. </h4>
   <div
      id="root"
      style=" background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; padding: 10px; "
      onclick="clickEventHandler()"
      onmouseover="mouseoverEventHandler()"
      onmouseout="mouseoutEventHandler()">
      It is an element with JavaScript DOM Events!
   </div>
   <script>
      // element
      const root = document.getElementById('root')
      
      // Event Handlers
      function clickEventHandler() {
         root.innerHTML = 'click event occurs!'
      }
      function mouseoverEventHandler() {
         root.innerHTML = 'mouseover event occurs!'
      }
      function mouseoutEventHandler() {
         root.innerHTML = 'mouseout event occurs!'
      }
   </script>
</body>
</html>

Example 5

'input', and 'copy' Events

In the below example, we have used the JavaScript DOM events to replicate the user input value in the webpage and show if the user tries to copy the element’s content. We have used two events in this example: ‘input’ and ‘copy.’ We used an input field and associated an ‘input’ event. Also, we associate the ‘copy’ event with the root element. The event attributes are ‘oninput’ and ‘oncopy’ for the ‘input’ and ‘copy’ events.

<html>
<body>
   <h2>Using the <i>'input', and 'copy' JavaScript DOM Events</i></h2>
   <h4>#NOTE: Put user input and copy the element content to show the result.</h4>
   <input
      id="input-field"
      type="text"
      name="example"
      oninput="inputEventHandler()"/>
   <div
      id="root"
      style=" background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; padding: 10px; " 
      oncopy="copyEventHandler()" >
      It is an element.
   </div>
   <script>

      // element
      const root = document.getElementById('root')

      //input field
      const input_field = document.getElementById('input-field')
      
      // Event Handlers
      function inputEventHandler() {
         root.innerHTML = input_field.value
      }
      function copyEventHandler() {
         root.innerHTML =
         'copy event occurs! <br /> User tries to copy this content!'
      }
   </script>
</body>
</html>

Before any event occurs

After entering some text in the input field

After copying the text of the element

In this tutorial, we learned what JavaScript DOM Events are. We have learned some of the most used JavaScript DOM Events, also. We have changed or modified the element's content by different events. In addition, we have seen two examples where we used different JavaScript DOM Events and saw the results on the webpage. Users can use any of these events per their requirements and follow the examples to better understand the JavaScript DOM Events.

Updated on: 31-Oct-2022

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements