Scribd
Upload
5 views5 pages

JavaScript Events

JavaScript events are actions that allow web pages to respond to user interactions and browser activities, enhancing interactivity. The document details various mouse and keyboard events, including examples for each type, such as click, mouse over, key down, and key up events. Each event is accompanied by a code snippet demonstrating how to implement the event in HTML and JavaScript.

Uploaded by

justthat710
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views5 pages

JavaScript Events

JavaScript events are actions that allow web pages to respond to user interactions and browser activities, enhancing interactivity. The document details various mouse and keyboard events, including examples for each type, such as click, mouse over, key down, and key up events. Each event is accompanied by a code snippet demonstrating how to implement the event in HTML and JavaScript.

Uploaded by

justthat710
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

JavaScript Events

JavaScript events are actions or occurrences, such as user interactions or browser activities,
that a web page can respond to. These events allow developers to execute specific code in
response to user inputs, enhancing interactivity and functionality.

Mouse Events

Mouse events are triggered/activated by user actions involving the mouse.

1. Click Event - onclick:


Occurs when the user clicks on an element.

Example:
<html>

<script language="Javascript" type="text/Javascript">

function clickevent()
{
document.write("This is John");
}

</script>
<body>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>

When the button labeled "Who's this?" is clicked, the function clickevent() is executed. This
replaces the entire content of the page with the text:
"This is John”

2. Mouse Over Event - onmouseover


The action is initiated when the mouse cursor is kept over the element.

Example:
<html>

<script language="Javascript" type="text/Javascript">

function mouseoverevent()
{
alert("Mouse Over Event");
}

</script>
<body>
<p onmouseover="mouseoverevent()"> Keep cursor over</p>
</body>
</html>

The alert of ‘Mouse Over Event’ is shown when the cursor is kept over the text.

3. Mouse Out Event - onmouseout:


Activated when the mouse pointer leaves an element.

Example:
<html>

<script language="Javascript" type="text/Javascript">

function mouseoutevent()
{
alert("Mouse has left the text!");
}

</script>
<body>
<form>
<p onmouseout="mouseoutevent()"> Hover over this text and then move your mouse
away.</p>
</form>
</body>
</html>

When the mouse is moved away from the text, it displays an alert saying:
"Mouse has left the text!”

4. Mouse Down Event - onmousedown:


Occur when the mouse button is pressed down on an element.

Example:
<html>

<script>
function mouseDown() {
alert("Mouse button pressed!");
}
</script>

<body>
<input type="button" onmousedown="mouseDown()">Press Me</input>

</body>
</html>

When you press the mouse button down on the "Press Me" button, an alert appears saying:
"Mouse button pressed!”

5. Mouse Up Event - onmouseup:


The function is executed when the mouse button is released after a press.

Example:
<html>

<script>
function mouseUp() {
alert("Mouse button released!");
}
</script>

<body>
<input type="button" onmouseup="mouseUp()">Release Me</input>

</body>
</html>

When you release the mouse button after pressing it on the "Release Me" button, an alert
appears saying:
"Mouse button released!”

6. Mouse Move Event - onmousemove:


The action is initiated when the mouse pointer moves over an element.

Example:
<html>

<script>
function mousemoveevent() {
alert("Mouse is moving!");
}
</script>

<body>
<p onmouseup="mousemoveevent()">Move your mouse over this text</p>

</body>
</html>

When you move the mouse pointer over the text an alert appears saying:
"Mouse is moving!"

7. Double Click Event - ondblclick:


The function is executed when the user double-clicks an element.

Example:
<html>

<script>
function doubleClick() {
alert("Button double-clicked!");
}
</script>

<body>
<input type ="button" ondblclick="doubleClick()">Double Click Me</input>

</body>
</html>

When you double-click on the "Double Click Me" button, an alert appears saying:
"Button double-clicked!”

Keyboard Events

Keyboard events are triggered/activated when the user interacts with the keyboard.

1. Key Down Event - onkeydown:


The action is initiated when a key is pressed down.

Example:
<html>
<script>
function keydownevent() {
alert("Key Down event” );
}
</script>
<form>
<input type="text" onkeydown="keyDownEvent()" placeholder="Type something"><br>
</form>
</html>

The alert of ‘Key Down Event’ is shown when the key is pressed.

2. Key Up Event - onkeyup:


The function is executed when a key is released.

Example:
<html>
<script>
function keyupevent() {
alert("Key Up event");
}
</script>
<form>
<input type="text" onkeyup="keyUpEvent()" placeholder="Type something">
</form>
</html>

The alert of ‘Key Up Event’ is shown when the key is released.

You might also like