Understanding JavaScript DOM and Events

#javascript #frontend #webdev #programming

JavaScript HTML DOM
When a web page loads, the browser creates a tree-like representation of the HTML document.Each part of the document are nodes in the tree:

JavaScript Events
JavaScript events are actions or occurrences that happen in the browser window which the system tells you about so your code can react to them. They act as the bridge between user interactions (like clicks, keypresses, or mouse movements) and the logic you write to handle those behaviors.
Examples of events:

An HTML button is clicked.
A web page has finished loading.
The mouse moves over an element.
A keyboard key is pressed.
An HTML input field is changed.

Common HTML Events

onchange Event
The onchange event is often used in combination with validation of input fields.onchange event occurs when the element loses focus(clicks or tabs anyway).

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onchange Attribute</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function transforms the input to upper case.</p>
<script>
function upperCase() {
  const x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

onClick Event
The onclick attribute fires on a mouse click on the element.

<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".</p>
<script>
function myFunction() {
  document.getElementById("demo").innerText = "Hello World";
}
</script>
</body>

onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onmouseover Attribute</h2>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
  obj.innerText = "Thank You"
}
function mOut(obj) {
  obj.innerText = "Mouse Over Me"
}
</script>
</body>
</html>

The onmousedown, onmouseup and onclick Events
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onmousedown Attribute</h2>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerText= "Release Me";
}
function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerText="Thank You";
}
</script>
</body>
</html>

onload Event
Execute a JavaScript immediately after a page has been loaded.

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</body>
</html>

References
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/jsref/event_onchange.asp
https://www.geeksforgeeks.org/html/html-onchange-event-attribute/
https://www.w3schools.com/js/js_htmldom_events.asp
https://www.w3schools.com/tags/ev_onclick.asp
https://www.w3schools.com/jsref/event_onload.asp

DEV Community

Understanding JavaScript DOM and Events

Top comments (0)