Scribd
Upload
7 views

HTML Events Program

Uploaded by

akbar111birbal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML Events Program

Uploaded by

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

FORM EVENTS (ON CLICK) (HTML EVENTS Q NO:13)

<!DOCTYPE html>

<html>

<head>

<script>

function fun() {

alert("Welcome to the class");

</script>

</head>

<body>

<h3> This is an example of using onclick attribute in HTML. </h3>

<p> Click the following button to see the effect. </p>

<button onclick = "fun()">Click me</button>

</body>

</html>

ONSUBMIT

<!DOCTYPE html>

<html>

<body>

<p>When you submit the form, a function is triggered which alerts some text.</p>

<form action="/action_page.php" onsubmit="myFunction()">

Enter name: <input type="text" name="fname">

<input type="submit" value="Submit">


</form>

<script>

function myFunction() {

alert("The form was submitted");

</script>

</body>

</html>

MOUSE EVENTS (HTML EVENTS Q NO:13)

<!DOCTYPE html>

<html>

<head>

<title>Mouse Events</title>

</head>

<body>

<p id="message">Move your mouse over this area to see the events:</p>

<script>

const messageElement = document.getElementById('message');

messageElement.addEventListener('mouseover', (event) => {

displayEventMessage(event.type);

});
messageElement.addEventListener('mouseout', (event) => {

displayEventMessage(event.type);

});

messageElement.addEventListener('mousedown', (event) => {

displayEventMessage(event.type);

});

messageElement.addEventListener('mouseup', (event) => {

displayEventMessage(event.type);

});

messageElement.addEventListener('mousemove', (event) => {

displayEventMessage(event.type);

});

function displayEventMessage(eventType) {

let message = "Mouse event: ";

switch (eventType) {

case 'mouseover':

message += "Mouse entered the area.";

break;

case 'mouseout':
message += "Mouse left the area.";

break;

case 'mousedown':

message += "Mouse button pressed.";

break;

case 'mouseup':

message += "Mouse button released.";

break;

case 'mousemove':

message += "Mouse moved within the area.";

break;

default:

message += "Unknown event.";

messageElement.innerHTML = message;

</script>

</body>

</html>

KEYBOARD EVENTS

<!DOCTYPE html>

<html>
<head>

<title>Keyboard Events</title>

</head>

<body>

<p id="message">Press a key to see the key events:</p>

<script>

const messageElement = document.getElementById('message');

document.addEventListener('keydown', (event) => {

displayKeyEvent(event.type, event.key);

});

document.addEventListener('keyup', (event) => {

displayKeyEvent(event.type, event.key);

});

document.addEventListener('keypress', (event) => {

displayKeyEvent(event.type, event.key);

});

function displayKeyEvent(eventType, key) {

let message = "Keyboard event: ";


switch (eventType) {

case 'keydown':

message += `Key down: ${key}`;

break;

case 'keyup':

message += `Key up: ${key}`;

break;

case 'keypress':

message += `Key pressed: ${key}`;

break;

default:

message += "Unknown event.";

messageElement.innerHTML = message;

</script>

</body>

</html>

You might also like