What are the events in Javascript? How does the event function work?

Types of Javascript Events

  1. Mouse Events
  2. Keyboard Events
  3. Form Events
  4. Document/Window Events

1. Mouse Events

onclick event:

<html>
<head>
<script>
function show() {
alert('Hello World!');
}
</script>
</head>
<body>
<button type="button" onclick="show()">Click Me</button>
</body>
</html>

onmouseover event:

<button type="button" onmouseover="alert('Mouse pointer over a button!');">Place Mouse Over Me</button>

onmouseout event:

<html>
<head>
<script>
function show() {
alert('Mouse Pointer Outside the button');
}
</script>
</head>
<body>
<button type="button" onmouseout="show()">Place Outside</button>
</body>
</html>

2. Keyboard Events

onkeydown:

<input type="text" onkeydown="alert('You have pressed a key inside input')"><textarea onkeydown="alert('You have pressed a key inside textarea')"></textarea>

onkeyup:

<input type="text" onkeyup="alert('You have released a key inside input')"><textarea onkeyup="alert('You have released a key inside textarea')"></textarea>

onkeypress:

<input type="text" onkeypress="alert('You have pressed a key inside input')"><textarea onkeypress="alert('You have pressed a key inside textarea')"></textarea>

3. Form Events

onchange:

<select onchange="alert('You have changed the selection');">
<option>Select</option>
<option>Mr.</option>
<option>Mrs.</option>
</select>

onfocus:

<script>
function highlight(elm){
elm.style.borderColor = "brown";
}
</script>
<input type="text" onfocus="highlight(this)">

onblur:

<script>
function blur(elm){
elm.style.borderColor = "none";
}
function focus(elm){
elm.style.borderColor = "brown";
}
</script>
<input type="text" onblur="blur(this)">
<input type="text" onfocus="focus(this)">

onsubmit:

<form action="send.php" method="post" onsubmit="alert('Form data will be submitted.');">
<label>First Name:</label>
<input type="text" name="firstname" required>
<input type="submit" value="Submit">
</form>

4. Document/Window Events

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Siddharth Rastogi

Siddharth Rastogi

41 Followers

I am a full stack developer, I have an expertise in Web Development. I write tech stuff and share my knowledge with others with the help of articles.