DOM Events

DOM events are actions or occurrences that happen within the Document Object Model (DOM) of a web page. They can be triggered by user interactions, changes to the document, or other events happening in the browser.

Here are some commonly used DOM events:

• Click Event: Occurs when an element is clicked by the user.
• Mouseover Event: Occurs when the mouse pointer is moved over an element.
• Keydown Event: Occurs when a key on the keyboard is pressed down.
• Submit Event: Occurs when a form is submitted.
• Change Event: Occurs when the value of an input element is changed.
• Load Event: Occurs when a web page or an external resource finishes loading.
• Scroll Event: Occurs when the user scrolls through the document.
• Resize Event: Occurs when the browser window is resized.
• Focus and Blur Events: Occur when an element gains or loses focus.
• Touch Events: Occur when a touch-based device is used to interact with the page.

Reacting to Events

When a user clicks on an HTML element, an event is triggered to execute JavaScript code.

To respond to a user click event, you can add JavaScript code to the HTML event attribute:

onclick="JavaScript code goes here"

In the below example, the content of the <p> element is changed when a user clicks on it:

Input:-

Output (Before Click):-

Output (After Click):-

In this example, a function is called from the event handler:

Output (Before Click):-

Output (After Click):-

HTML Event Attributes

You can use event attributes to assign events to HTML elements.

Input:-

Output (Before Click):-

Output (After Click):-

Assign Events Using the HTML DOM

The HTML DOM allows user to assign or give events to HTML elements using JavaScript:

In the example above, a function named displayDateTime is assigned to an HTML element with the id="myButton".

The function will be executed when the button is clicked.

Input:-

Output (Before Click):-

Output (After Click):-

The onload and onunload Events

The onload and onunload events will be triggered when the user enters or leaves the current page.

The onload event can be used to check the user's browser type and browser version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with the cookies also.

Input:-

Output :-

Onchange Event

The onchange event is commonly used for input field validation.

Here's an example of how to use the onchange event. The upperCase() function will be triggered when a user changes the content of an input field.

Input:-

Output (Before Click):-

Output (After Click outside the input text):-

onmouseover and onmouseout Events

The onmouseover and onmouseout events are used to execute a function when the user's mouse cursor enters or leaves an HTML element, respectively.

Input:-

Output (Before mouser over):-

Output (After mouse over):-

onmousedown, onmouseup and onclick Events

Input:-

Output (No action):-

Output (Mouse key pressed):-

Output (Mouse key released):-