Tutorial: Javascript Dom Events
Tags: javascript, webdev, programming, codenewbie
Published: 2022-01-31 09:53:17

---
title: Tutorial: Javascript Dom Events
published: true
date: 2021-01-10 01:16:04 UTC
tags: [javascript, webdev, programming, codenewbie]
canonical_url: https://www.devwares.com/blog//javascript-html-dom-events
---

## JavaScript HTML DOM Events

JavaScript can respond to HTML events thanks to HTML DOM:


**Reacting to Events**

When an event occurs, such as when a user clicks on an HTML element, a JavaScript can be run. Add the following JavaScript code to an HTML event property to run code when a user clicks on an element: onclick=JavaScript

Examples of HTML events: -When a user clicks the mouse

- When a web page loads
- When a picture loads
- When the mouse travels over an element
- When an input field is modified
- When an HTML form is submitted
- When a user strokes a key

The content of this Code is altered when a user clicks on the `<h1>`element: The event handler calls a function in this code: **HTML and JavaScript Code:**

```html
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
```

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

HTML and JavaScript Code:**

```javascript
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>
</body>
</html>

```

**HTML Event Attributes:** To assign events to HTML elements you can use event attributes. Assign an onclick event to a button element:

**JavaScript Code:**

```html
<button onclick="displayDate()">Try it</button>

```

In the code above, a function named displayDate will be executed when the button is clicked.

**Assign Events Using the HTML DOM**

The HTML DOM allows you to assign events to HTML elements using JavaScript: Assign an onclick event to a button element:

**JavaScript Code:**

```html
<script>document.getElementById("myBtn").onclick = displayDate;</script>

```

In the code above, a function named displayDate is assigned to an HTML element with the id="myBtn". The function is invoked when the button is pressed.

**The onload and onunload Events** The onload and onunload events are fired when a user enters or quits a page. The onload event can be used to determine the visitor's browser type and version, and then load the appropriate version of the web page based on that information. Cookies can be handled by using the onload and onunload events.

**JavaScript Code:**

```javascript
<body onload="checkCookies()">

```

**The onchange Event**

Input field validation and the onchange event are frequently used together. The onchange is demonstrated in the code below. When a user modifies the content of an input field, the upperCase() function will be called.

**HTML code:**

```html
<input type="text" id="fname" onchange="upperCase()">

```

**The onmouseover and onmouseout Events**

When a user mouses over or out of an HTML element, the onmouseover and onmouseout events can be used to call a function: Mouse Over Me

**The onmousedown, onmouseup and onclick Events** A mouse click is comprised of the onmousedown, onmouseup, and onclick events. The onmousedown event is triggered when a mouse-button is clicked, the onmouseup event is activated when the mouse-button is released, and the onclick event is triggered when the mouse-click is completed.


[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)


## Resources

You may find the following resources useful:


- [Contrast Bootstrap 5 UI Kit](https://www.devwares.com/product/bootstrap-contrast/)
- [Tutorial: Javascript Let And Const](https://www.devwares.com/blog/javascript-let-and-const)
- [Tutorial: Javascript Math Object](https://www.devwares.com/blog/javascript-math-object)
- [Tutorial: Javascript Number Methods](https://www.devwares.com/blog/javascript-number-methods)
- [Tutorial: Javascript Operator](https://www.devwares.com/blog/javascript-operator)
- [Contrast Installation](https://www.devwares.com/docs/contrast/react/Installation/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Navbar](https://www.devwares.com/docs/contrast/react/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/react/navigation/pagination/)
- [Sidebar](https://www.devwares.com/docs/contrast/react/navigation/sidebar/)
- [Tab](https://www.devwares.com/docs/contrast/react/navigation/tabs/)
- [Date Picker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [Time Picker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [Editable Table](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [Data Table](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets]
(https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms]
(https://www.devwares.com/docs/contrast/react/forms/)