The examples seen below are powered by two functions. The first is attachEventHandler, which configures an event listener for an element with an ID elementId. It then binds that element with a handler that specifies what behavior should result from said event:
function attachEventHandler(elementId, event, handler) {
const element = document.getElementById(elementId);
if (element) {
element.addEventListener(event, handler);
} else {
console.error(`Element with ID "${elementId}" not found.`);
}
}
There are event handler functions for each of the unique mouse events in JavaScript, which make calls to updateDisplay. When a call is made, the function changes the content of a visual area in the page, using the metadata associated with the triggering event:
function updateDisplay(elementId, content) {
const element = document.getElementById(elementId);
if (element) {
element.textContent = content;
} else {
console.error(`Display element "${elementId}" not found.`)
}
}
All of the identifier strings for JavaScript's mouse events are listed below:
clickdblclickmouseovermouseoutmouseentermouseleavemousedownmouseupmousemovecontextmenumousewheelDOMMouseScrollclick)dblclick)mouseover)mouseout)mouseenter)mouseleave)mousedown)mouseup)mousemove)contextmenu)mousewheel)DOMMouseScroll)Keyboard events are triggered when users interact with the keyboard. The main keyboard events include:
keydown - Fired when any key is pressed downkeyup - Fired when any key is releasedkeypress - Fired when a character key is pressed (deprecated but still used)keydown)keyup)keypress)Form events are triggered when users interact with form elements. The main form events include:
submit - Fired when a form is submittedinput - Fired when an input value changeschange - Fired when an input loses focus and its value has changedfocus - Fired when an element gains focusblur - Fired when an element loses focusreset - Fired when a form is resetsubmit)input)change)focus)blur)