Understanding JavaScript Events
JavaScript Events are occurrences or actions of users interacting with the HTML and the program or the applications. Whenever a user clicks on a button, an event occurs, and these events interact with the HTML and the system.
Furthermore, if a user clicks a button on a webpage, you may wish to respond by presenting an information box. In this post, we'll go over several key ideas related to events and how they function in browsers. This will not be a thorough study of JavaScript Events; instead, it will cover only what you need to understand at this point. Click here to read about the hierarchical webpage structure(DOM)
As previously stated, events are occurrences or actions that take place in the system you're programming — whenever an event occurs, the system generates a signal of some kind and provides a method by which an action can be performed automatically (i.e, some code running) whenever the event occurs.
During a race, for example, when the racetrack is clear for launch, a signal is conveyed to the racers. As a result, the Cars can now move away safely from the starting line.
In cases of the Web, events are often fired within the browser window and are associated with a specific object that sits within it. This could be a single element, a collection of elements, the HTML content in the current tab, or the full browser window. There are different types of events that could happen.
Here are some events that could occur on the Web:
- The user chooses, clicks, or moves their cursor over an element.
- The browser window is resized or closed by the user.
- A web page has completed loading.
- A form has been submitted.
- A video is started, stopped, or terminated.
- An error has occurred.
JavaScript Events: Mouse Events
1. onclick Event Type
This is the most common event kind, which occurs whenever a user hits the left mouse button. You can apply validation, warnings, and so on to this event type.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHi() {
alert("Hi User")
}
//-->
</script>
</head>
<body>
<p>Click on this button and check out the result</p>
<form>
<input type = "button" onclick = "sayHi()" value = "Say Hi" />
</form>
</body>
</html>
2. onsubmit Event Type
Whenever you attempt to submit a form, an event called onsubmit happens. You can use this event type during form validation.
Example
The following code demonstrates how to utilize onsubmit. Before sending form input to the webserver, we use the validate() function. If the validate() function comes back "true," the form is submitted; anything other than that, the data is not submitted.
Consider the following example:
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validations will go here
.........
return either false or true
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
3. onmouseout and onmouseover
The onmouseout and onmouseover event types will assist you in creating great effects with pictures or even text. Whenever you move your mouse over an element, the onmouseover event is triggered, and whenever you move your mouse away from that element, the onmouseout event is triggered.
Check out the following example:
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Move your mouse into this division to check out the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This space is the inside of the division </h2>
</div>
</body>
</html>
4. oncontextmenu Event Type
When you right-click on the components in the example below, an alert message will appear.
<button type="button" oncontextmenu="alert('You have just right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have just right-clicked a link!');">Right Click on Me</a>
JavaScript Events: Keyboard Events
1. onkeydown Event Type
Anytime the user hits a key on the keyboard, the onkeydown event happens.
<input type="text" onkeydown="alert('You have just pressed a key inside the text input!')">
<textarea onkeydown="alert('You have just pressed a key inside the textarea!')"></textarea>
2. onkeyup Event Type
Anytime the user releases a key on the keyboard, the onkeyup event happens.
<input type="text" onkeyup="alert('You have just released a key inside the text input!')">
<textarea onkeyup="alert('You have just released a key inside the textarea!')"></textarea>
3. onkeypress Event Type
Anytime the user presses down a key on their keyboard that contains a character value attached to it, the onkeypress event happens. Shift, Ctrl, Esc, Alt, Arrow keys, and so on will not create a keypress event but will instead produce a keyup and keydown event.
<input type="text" onkeypress="alert('You have just pressed a key inside the text input box!')">
<textarea onkeypress="alert('You have just pressed a key inside the textarea provided!')"></textarea>
JavaScript Events: Form Events
1. onfocus Event Type
When a user grants focus to elements on a website page, the onfocus event happens.
<script>
function highlightInput(elm){
elm.style.background = "Blue";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Submit</button>
2. onblur Event Type
When the user moves the attention away from a form window or element, the onblur event happens.
<input type="text" onblur="alert('Text input will lose focus!')">
<button type="button">Submit</button>
3. onchange Event Type
<select onchange="alert('You have now changed your selection!');">
<option>Select</option>
<option>Standard Account</option>
<option>Current Account</option>
</select>
4. onsubmit Event Type
<form action="action.php" method="post" onsubmit="alert('Form data would be sent to the server!');">
<label>Full Name:</label>
<input type="text" name="full-name" required>
<input type="submit" value="Submit">
</form>
JavaScript Events: Window Events
| Event | Event Handler | Description |
| resize | onresize | Whenever the user resizes their browser window, this event happens. |
| load | onload | Whenever the web page finishes loading in a web browser, this event happens. |
| unload | onunload | When a user exits their current web page, this event happens. |
