Home JavaScript HTML CSS
Advertisement
JavaScript Events
Ads by
Send feedback
Why this ad?
The change in the state of an object is known as an
Event. In html, there are various events which
represents that some activity is performed by the
user or by the browser. When javascript code is
included in HTML, js react over these events and
allow the execution. This process of reacting over the
events is called Event Handling. Thus, js handles the
HTML events via Event Handlers.
For example, when a user clicks over the browser,
add js code, which will execute the task to be
performed on the event.
Some of the HTML events and their event handlers
are:
Advertisement
Mouse events:
Event Event Description
Performed Handler
click onclick When mouse click
on an element
mouseover onmouseover When the cursor of
the mouse comes
over the element
mouseout onmouseout When the cursor of
the mouse leaves
an element
mousedown onmousedown When the mouse
button is pressed
over the element
mouseup onmouseup When the mouse
button is released
over the element
mousemove onmousemove When the mouse
movement takes
place.
Keyboard events:
Advertisement
Event Event Description
Performed Handler
Keydown & onkeydown When the user press
Keyup & onkeyup and then release the
key
Form events:
ADVERTISEMENT
ADVERTISEMENT
Event Event Description
Performed Handler
focus onfocus When the user focuses
on an element
submit onsubmit When the user submits
the form
blur onblur When the focus is away
from a form element
change onchange When the user modifies
or changes the value of
a form element
Window/Document events
Event Event Description
Performed Handler
load onload When the browser
finishes the loading of
the page
unload onunload When the visitor leaves
the current webpage, the
browser unloads it
resize onresize When the visitor resizes
the window of the
browser
Let's discuss some examples over events and their
handlers.
ADVERTISEMENT
ADVERTISEMENT
Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is JavaTpoint");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="W
</form>
</body>
</html>
Test it Now
MouseOver Event
ADVERTISEMENT
ADVERTISEMENT
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is JavaTpoint");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor o
</body>
</html>
Test it Now
Focus Event
ADVERTISEMENT
ADVERTISEMENT
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.backgro
}
//-->
</script>
</body>
</html>
Test it Now
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydown
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>
Test it Now
Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loade
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>
Test it Now
← Prev Next →
For Videos Join Our Youtube
Channel: Join Now
Feedback
Help Others, Please Share
Learn Latest Tutorials
Splunk SPSS
Swagger Transact-SQL
Tumblr ReactJS
Regex Reinforcement
Learning
RxJS tutorial
R Programming RxJS
React Native Python Design
Patterns
Python Pillow Python Turtle
Keras tutorial
Keras
Preparation
Aptitude
Aptitude Reasoning
Verbal Ability
Verbal Ability Interview
Questions
Company
Questions
Trending Technologies
AWS Tutorial
Artificial AWS
Intelligence
Selenium tutorial Cloud Computing
Selenium Cloud Computing
Hadoop tutorial ReactJS Tutorial
Hadoop ReactJS
Data Science Angular 7
Git Tutorial
Blockchain Git
DevOps Tutorial
Machine Learning DevOps
B.Tech / MCA
DBMS tutorial
DBMS Data Structures
DAA tutorial Operating System
DAA Operating System
Computer Network Compiler Design
Computer Discrete
Organization Mathematics
Ethical Hacking
Ethical Hacking Computer Graphics
html tutorial
Software Web Technology
Engineering
Automata Tutorial
Cyber Security Automata
C++ tutorial
C Programming C++
Java tutorial
Java .Net
Python tutorial List of Programs
Python Programs
Control System Data Mining
Data Warehouse
