Scribd
Upload
53 views

JavaScript Events - Javatpoint

Uploaded by

Sajid Bhatt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

JavaScript Events - Javatpoint

Uploaded by

Sajid Bhatt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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

Send your Feedback to feedback@javatpoint.com

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

You might also like