Hey!! Friends welcome to our new article events in javascript. Here we will start from where we finished in the previous article.
Now, lets get the started tutorial of events in javascript.
If you missed the previous articles then please check once Dom with Javascript.
| What’s inside: Events and Event Listeners Onclick Event Onload Event JavaScript Onblur Events Onfocus Events onsubmit Event Type FAQs: |
Events and Event Listeners
Now the question is what are Events?
The change in the state of an object is called an Event. When the page loads, it knows as an event. When the user clicks any button, that click to is also an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. all are events.
The events are actions or occurrences that happen in the system which you are programming. Events are a part of the Document Object Model (DOM), and every HTML element contains a set of events that can trigger the JavaScript Code.
Onclick Event
The onclick event is the most used event type which occurs when a user clicks the left button of his mouse. We can put our validations, warning messages, etc., against this event type.
As for example:
<!doctype html>
<html>
<head>
<script>
function heyguys() {
alert('Hi guys!');
}
</script>
</head>
<body>
<button type="button" onclick="heyguys()">Click me event</button>
</body>
</html> Output:
Onload Event
When an element is loaded completely, this event is call up.
For example:
<!doctype html>
<html>
<head>Javascript Events Example</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html> Onblur Events
The onblur event happens during an object loses focus. It is the opposite of the onfocus event.
The onblur event is mostly used with form validation code (e.g. when the user leaves a form field).
Syntax:
<element onblur="myScript">For example:
<html>
<body>
<center>
<h1 style="color:blue">
technicalblog.in
</h1>
<h2>onblur event</h2> Email:
<input type="email" id="email" onblur="myFunction()">
<script>
function myFunction() {
alert("My Focus lost");
}
</script>
</center>
</body>
</html> technicalblog.in
onblur event
Email:Onfocus Events
The onfocus event is triggered when an element gets focus. You can try to run the below-mentioned code to learn how to implement onfocus event in JavaScript.
For example:
<!DOCTYPE html>
<html>
<body>
<p>Write below:</p>
<input type = "text" onfocus = "newFunc(this)">
<script>
function newFunc(x) {
x.style.background = "lightgreen";
}
</script>
</body>
</html>Write below:
onsubmit Event Type
An onsubmit event is an event which occurs when you try to submit a form. If you want, then you can put your form validation against this event type.
As for example:
<!DOCTYPE html >
<html>
<head>
<title>onsubmit event attribute</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
<script>
function tech() {
alert("Form submitted successfully.") ;
}
</script >
</head>
<body>
<h1>technicalblog.in</h1>
<h2>onsubmit event attribute</h2>
<form onsubmit = "tech()">
First Name:<input type = "text" value = "" /><br/>
Last Name:<input type = "text" value = "" /><br/>
<input type = "submit" value = "Submit" />
</form>
</body>
</html> Output: After clicking on submit button validation is occurred
FAQs:
How many ‘onload’ events can be written on a page?
Ans: 1.
Which is the most preferred way of handling events?
Ans: Registering a listener to an element.
After completing this ‘Events in javascript’ topic we completed our whole JavaScript lectures of the web development series.
In the next article, we will discuss the Ajax in JavaScript which is also a very important topic of web development tutorial.
So, Please stay with us thank you for being here 🙂
Wow JavaScript tutorial…it would be quite useful even in wordpress optimisation
Thanks for such a valuable tutorial.keep it up
It was helpful 😊
helpful post! Thank you!
Nice
Very informative and easy to understand 👍
Great information tq so much
Cool
Keep it up more ❤️
KEEP growing