JavaScript In The Browser : DOM and Events Fundamentals.

Whats' the DOM and DOM Manipulation

DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from the document. We can also add events to these elements to make our page more dynamic.

The DOM views an HTML document as a tree of nodes. A node represents an HTML element.

Let's take a look at this HTML code to better understand the DOM tree structure.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM tree structure</title>
  </head>
  <body>
    <h1>DOM tree structure</h1>
    <h2>Learn about the DOM</h2>
  </body>
</html>

Events Fundamentals in javaScript.

Our document is called the root node and contains one child node which is the element. The element contains two children which are the and elements.

Both the and elements have children of their own.

JavaScript events are specific actions or proceedings that happen in the program or website you are developing. You can set up a response which will be triggered by specified events. For example, JavaScript mouse events refer to various cursor movements over elements.

Some Important Tips :

Anything that happens to an HTML element using JavaScript is called a JavaScript event.
JavaScript can execute some specific code when a particular event happens.
A JavaScript event can be something that a user does (e.g., clicking on an HTML element) or something that a browser does (e.g., finishing loading a page).

Events: What and When?

HTML event attributes can run JavaScript directly or through a function. The functions can and should be created by you. This way they will suit your needs best.

You can also prevent JavaScript events from being handled. JavaScript event handlers can be useful when you want to execute a particular functionality when something changes on the web page.

Event Handler Attributes

JavaScript event handler attributes can be inserted into HTML elements. In the example below, you can see one of the simplest JavaScript button events. A JavaScript event handler attribute onclick is added to an HTML button element.

When the user clicks the button, a JavaScript event occurs. Also, the code defines what to do when that event occurs:

Example


<button onclick="document.getElementById('dateOut').innerHTML = Date()">What is the time</button>

Common Events

There are plenty of possible JavaScript events to make your website dynamic and neat. However, as in every programming language, some functions are more popular than others because they are more convenient and suitable within context. For instance, JavaScript mouse events include cases when the cursor hovers over elements, is clicked or moved over an image.

Here is a list of the most common JavaScript event handlers

JavaScript Event Handlers with Description

onchange ->Occurs when an HTML element changes
onclick ->Occurs when the user clicks on an HTML element
onmouseover ->Occurs when the user hovers their cursor over an HTML element
onmouseout ->Occurs when the user hovers their cursor away from an HTML element
onkeydown ->Occurs when the user presses a keyboard key
onload ->Occurs when the current web page finishes loading

Jayesh Hande's Blog