Javascript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM).
These events by default use bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script.
Syntax:
<HTML-element Event-Type = "Action to be performed">
These are some javascript events:
JavaScript onclick events: This is a mouse event and provokes any logic defined if the user clicks on the element it is bound to.
Example: In this example, we will display a message in the alert box when the button is clicked
html
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="hiThere()"
style="margin-left: 50%;">
Click me event
</button>
</body>
</html>
|
Output:
JavaScript onkeyup event: This event is a keyboard event and executes instructions whenever a key is released after pressing.
Example: In this example, we will change the color by pressing UP arrow key
html
<!doctype html>
<html>
<head>
<script>
var a=0;
var b=0;
var c=0;
function changeBackground() {
var x=document.getElementById('bg');
x.style.backgroundColor='rgb('+a+', '+b+', '+c+')';
a+=100;
b+=a+50;
c+=b+70;
if(a>255) a=a-b;
if(b>255) b=a;
if(c>255) c=b;
}
</script>
</head>
<body>
<h4>The input box will change color when UP arrow key is pressed</h4>
<input id="bg" onkeyup="changeBackground()" placeholder="write something" style="color:#fff">
</body>
</html>
|
Output:
3) onmouseover event: This event corresponds to hovering the mouse pointer over the element and its children, to which it is bound to.
Example: In this example, we will make the box vanish when the mouse will be hovered on it
html
<!doctype html>
<html>
<head>
<script>
function hov() {
var e=document.getElementById('hover');
e.style.display='none';
}
</script>
</head>
<body>
<div id="hover"
onmouseover="hov()"
style="background-color:green;
height:200px;
width:200px;">
</div>
</body>
</html>
|
Output:
JavaScript onmouseout event: Whenever the mouse cursor leaves the element which handles a mouseout event, a function associated with it is executed.
Example:
html
<!doctype html>
<html>
<head>
<script>
function out() {
var e=document.getElementById('hover');
e.style.display='none';
}
</script>
</head>
<body>
<div id="hover" onmouseout="out()" style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>
|
Output:
JavaScript onchange event: This event detects the change in value of any element listing to this event.
Example:
html
<!doctype html>
<html>
<head></head>
<body>
<input onchange="alert(this.value)"
type="number"
style="margin-left: 45%;">
</body>
</html>
|
Output:
JavaScript onload event: When an element is loaded completely, this event is evoked.
Example:
html
<!doctype html>
<html>
<head></head>
<body>
<img onload="alert('Image completely loaded')"
alt="GFG-Logo"
src=
</body>
</html>
|
Output:
JavaScript onfocus event: An element listing to this event executes instructions whenever it receives focus.
Example:
html
<!doctype html>
<!doctype html>
<html>
<head>
<script>
function focused() {
var e=document.getElementById('inp');
if(confirm('Got it?')) {
e.blur();
}
}
</script>
</head>
<body>
<p style="margin-left: 45%;">
Take the focus into the input box below:
</p>
<input id="inp"
onfocus="focused()""
style=" margin-left: 45%;">
</body>
</html>
|
Output:
JavaScript onblur event: This event is evoked when an element loses focus.
Example:
html
<!doctype html>
<html>
<head></head>
<body style="margin-left: 40%;">
<p>Write something in the input box and then click elsewhere
in the document body.</p>
<input onblur="alert(this.value)">
</body>
</html>
|
Output:
PS: JavaScript onmouseup event listens to left and middle mouse clicks, but onmousedown event listens to left, middle, and right mouse clicks whereas onclick only handles left clicks.