00:00:00

Events in Javascript

In JavaScript, events are actions or occurrences that happen in the browser or in the web page, such as a user clicking a button, typing into a text box, or the page finishing loading. Events are used to trigger JavaScript code to run in response to a user's interaction with a web page.

Here are some commonly used events in JavaScript:

  1. Mouse events:
  • click: Fires when a mouse click event occurs.
  • mouseover: Fires when the mouse pointer moves over an element.
  • mouseout: Fires when the mouse pointer moves out of an element.
  • mousedown: Fires when the mouse button is pressed down on an element.
  • mouseup: Fires when the mouse button is released on an element.
  1. Keyboard events:
  • keydown: Fires when a key is pressed down on the keyboard.
  • keyup: Fires when a key is released on the keyboard.
  • keypress: Fires when a key is pressed and released on the keyboard.
  1. Form events:
  • submit: Fires when a form is submitted.
  • reset: Fires when a form is reset.
  • change: Fires when the value of an input element changes.
  • focus: Fires when an element receives focus.
  • blur: Fires when an element loses focus.
  1. Window events:
  • load: Fires when the page is finished loading.
  • unload: Fires when the page is unloaded.
  • resize: Fires when the window is resized.
  • scroll: Fires when the window is scrolled.

To handle an event in JavaScript, you can use the addEventListener() method to attach an event listener to an HTML element. Here is an example of using the addEventListener() method to attach a click event listener to a button:

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

In this example, we first select a button element using the querySelector() method. We then use the addEventListener() method to attach a click event listener to the button. The second argument to the addEventListener() method is a callback function that will be called when the button is clicked. In this case, the callback function simply logs a message to the console.

HTML DOM Events

HTML DOM Events - abort, afterprint, animationend, animationiteration, animationstart, beforeprint, beforeunload, blur, canplay, canplaythrough, change, click, contextmenu, copy, cut, dblclick, drag, dragend, dragenter, dragleave, dragover, dragstart, drop, durationchange, ended, error, focus, focusin, focusout, fullscreenchange, fullscreenerror, hashchange, input, invalid, keydown, keypress, keyup, load, loadeddata, loadedmetadata, loadstart, message, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, mousewheel, offline, online, open, pagehide, pageshow, paste, pause, play, playing, popstate, progress, ratechange, resize, reset, scroll, search, seeked, seeking, select, show, stalled, storage, submit, suspend, timeupdate, toggle, touchcancel, touchend, touchmove, touchstart, transitionend, unload, volumechange, waiting, wheel

HTML Properties and Methods - altKey, animationName, bubbles, button, buttons, cancelable charCode, changeTouches, clientX, clientY, clipboardData, code, composed, createEvent, ctrlKey, ctrlKey, currentTarget, data, dataTransfer, defaultPrevented, deltaX, deltaY, deltaZ, deltaMode, detail, elapsedTime, elapsedTime, eventPhase, getTargetRanges, getModifierState, inputType, isComposing, isTrusted, keyCode, location, lengthComputable, loaded, metaKey, metaKey, MovementX, MovementY, newValue, newURL, offsetX, offsetY, oldValue, oldURL, onemptied, pageX, pageY, persisted, preventDefault, propertyName, pseudoElement, region, relatedTarget, relatedTarget, repeat, screenX, screenY, shiftKey, shiftKey, state, stopImmediatePropagation, stopPropagation, storageArea, target, targetTouches, timeStamp, total, touches, transitionend, type, url, which, view