Events in javaScript are actions or occurrences that happens in a webpage For example, if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this article, we'll discuss some important javaSccript DOM events and see some examples of how they can be applied.
DOM EVENTS
Here are a couple of events we will be looking at.
Input events
Mouse events
Click events
Load events
Input events
OnBlur - This event is triggered when a user leaves or click outside an input field
var x = document.getElementById("first-name");
x.addEventListener('blur', () => {
console.log(x.value);
})
OnChange - This event is triggered when a user changes the content of an input field.
var x = document.getElementById("first-name");
x.addEventListener('change', () => {
console.log(x.value);
})
OnFocus - This event is triggered when an input field gets focus.
var x = document.getElementById("first-name");
x.addEventListener('focus', () => {
console.log('hello');
})
Mouse events
Onmouseover - This event is triggered when the mouse passes over an element
var x = document.getElementById("first-name");
x.addEventListener('mouseover', () => {
console.log('hello');
})
Onmousedown - This event is triggered when the mouse is clicked
var x = document.getElementById("first-name");
x.addEventListener('mousedown', () => {
console.log('hello');
})
Click events
Onclick - This event is triggered when a button is clicked.
var x = document.getElementById("first-name");
x.addEventListener('click', () => {
console.log('hello');
})
ondblclick - This event is triggered when a button is double clicked.
var x = document.getElementById("first-name");
x.addEventListener('click', () => {
console.log('hello');
})
Loadevents
Onload - This event is triggered when the page has been loaded
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
Onerror - This event is triggered when an error occurs when loading an element or image
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onerroe="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
Onresize - This event is triggered when an error occurs when loading an element or image
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onresize="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
There are a couple of other events in javascript but this is all we can cover for now. Thanks for reading..