JavaScript Event Handling

Event handling is crucial for interactive web pages. It allows you to define how the page should respond to user actions like clicks, mouse movements, key presses, etc

// Adding a click event listener to a button
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');

// Handling a mouseover event on an image
const image = document.getElementById('myImage');
image.addEventListener('mouseover', function() {
    console.log('Mouse is over the image!');
// Handling a key press event for the Enter key
document.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        console.log('Enter key was pressed');
// Handling form submit event
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    console.log('Form submission prevented');
// Handling change event on a select element
const select = document.getElementById('mySelect');
select.addEventListener('change', function() {
    console.log('Selected option: ' + select.value);

Leave the first comment