4. Create a button in your HTML with the text “Click Me”. Add an event listener to log “Button clicked!” to the console when the button is clicked. Select an image and add a mouseover event listener to change its border color. Add an event listener to the document that logs the key pressed by the user.
Step 1: Create index.html file inside the any folder
- Open
index.htmlfile in vscode and copy the below code paste it into that file, save it.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listeners Example</title>
<style>
img {
width: 200px;
height: 140px;
border: 5px solid black;
margin-top: 10px;
}
button {
padding: 5px 10px;
background: #000;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myButton">Click Me</button><br>
<img id="myImage" src="https://vtucircle.com/wp-content/uploads/2025/01/Full-Stack-Development-BIS601.jpg">
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function () {
console.log('Button clicked!');
});
const image = document.getElementById('myImage');
image.addEventListener('mouseover', function () {
image.style.borderColor = 'red';
});
document.addEventListener('keydown', function (event) {
console.log('Key pressed: ' + event.key);
});
</script>
</body>
</html>Step 2: To run program
- Install live server extension to see the visual output (It’s recommended).
OUTPUT:
