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) {
event.preventDefault();
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);
});