Scribd
Upload
24 views4 pages

JS Practical 07

The document contains two HTML examples demonstrating keyboard and mouse event listeners. The first example captures keydown, keypress, and keyup events from a text input field, displaying the key and code. The second example shows mouse movement and mouseout events within a designated area, along with a page load alert when the page is fully loaded.

Uploaded by

Sahil Badhe
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
24 views4 pages

JS Practical 07

The document contains two HTML examples demonstrating keyboard and mouse event listeners. The first example captures keydown, keypress, and keyup events from a text input field, displaying the key and code. The second example shows mouse movement and mouseout events within a designated area, along with a page load alert when the page is fully loaded.

Uploaded by

Sahil Badhe
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

Practical No : 07

1.

<!DOCTYPE html>

<html>

<head>

<title>Keyboard Event Listeners</title>

<style>

#output {

margin-top: 10px;

</style>

</head>

<body>

<h1>Keyboard Events Example</h1>

<input type="text" id="textInput" placeholder="Type something..." />

<div id="output">

<p><strong>Key Down:</strong> <span id="keydown-output"></span></p>

<p><strong>Key Press:</strong> <span id="keypress-output"></span></p>

<p><strong>Key Up:</strong> <span id="keyup-output"></span></p>

</div>

<script>

const textInput = document.getElementById('textInput');

// Keydown event

textInput.addEventListener('keydown', function(event) {

document.getElementById('keydown-output').textContent = `Key: ${event.key}, Code:


${event.code}`;

});

// Keypress event (note: keypress is generally used for character keys)


textInput.addEventListener('keypress', function(event) {

document.getElementById('keypress-output').textContent = `Key: ${event.key}, Code:


${event.code}`;

});

// Keyup event

textInput.addEventListener('keyup', function(event) {

document.getElementById('keyup-output').textContent = `Key: ${event.key}, Code:


${event.code}`;

});

</script>

</body>

</html>

• Out Put
2.

<!DOCTYPE html>

<html>

<head>

<title>Mouse and Load Events Example</title>

<style>

#mouseArea {

width: 300px;

height: 200px;

background-color: lightblue;

border: 2px solid blue;

margin: 20px;

#output {

margin-top: 10px;

</style>

</head>

<body>

<h1>Mouse and Page Load Event Example</h1>

<div id="mouseArea">Move your mouse over this area!</div>

<div id="output">

<p><strong>Mouse Position:</strong> <span id="mousemove-output"></span></p>

<p><strong>Mouse Status:</strong> <span id="mouseout-output"></span></p>

</div>

<script>

// Onload event - triggers when the page is fully loaded

window.onload = function() {
alert("Page is fully loaded!");

};

// Mousemove event - triggers when the mouse moves inside the div

const mouseArea = document.getElementById('mouseArea');

mouseArea.addEventListener('mousemove', function(event) {

document.getElementById('mousemove-output').textContent = `X: ${event.clientX},


Y: ${event.clientY}`;

});

// Mouseout event - triggers when the mouse leaves the div

mouseArea.addEventListener('mouseout', function() {

document.getElementById('mouseout-output').textContent = 'Mouse left the area!';

});

</script>

</body>

</html>

• Out Put

You might also like