{"id":8675,"date":"2025-03-18T10:33:07","date_gmt":"2025-03-18T05:03:07","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8675"},"modified":"2025-03-18T10:33:09","modified_gmt":"2025-03-18T05:03:09","slug":"events-in-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/events-in-javascript\/","title":{"rendered":"Events in JavaScript"},"content":{"rendered":"\n

What are Events?<\/strong>
Events are actions or occurrences detected by JavaScript, such as user interactions. It allows us to make our web pages interactive. For example, clicking a button, pressing a key or moving the mouse.<\/p>\n\n\n\n

List of common types of events used in JavaScript<\/strong><\/p>\n\n\n\n

Some of the commonly used java script events are listed below along with their usage illustrations.<\/p>\n\n\n\n

Mouse Events<\/strong>
click \u2013 Fires when an element is clicked.
dblclick \u2013 Fires when an element is double-clicked.
mousedown \u2013 Fires when a mouse button is pressed.
mouseup \u2013 Fires when a mouse button is released.
mouseover \u2013 Fires when the mouse enters an element.
mouseout \u2013 Fires when the mouse leaves an element.
mousemove \u2013 Fires when the mouse is moved over an element.<\/p>\n\n\n\n

Lets see an example here to illustrate the usage of mouse events. Here Click event gets triggered when the button is clicked displaying the the provided text in console.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Keyboard Events<\/strong>
keydown \u2013 Fires when a key is pressed.
keyup \u2013 Fires when a key is released.
keypress \u2013 (Deprecated) Fires when a key is pressed (not recommended, use keydown instead).<\/p>\n\n\n\n

Window Events<\/strong>
load \u2013 Fires when the page is fully loaded.
resize \u2013 Fires when the browser window is resized.
scroll \u2013 Fires when the user scrolls the page.
unload \u2013 Fires when the page is closed or navigated away.<\/p>\n\n\n\n

The following code demonstrates the usage of some of the keyboard and window events. The output of key event will be the entered values displayed by each character when a key is pressed. Similarly when the window is loaded, “Page fully loaded” will be printed in the console.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Form Events<\/strong>
submit \u2013 Fires when a form is submitted.
change \u2013 Fires when an input value changes.
focus \u2013 Fires when an element gains focus.
blur \u2013 Fires when an element loses focus.
input \u2013 Fires when the user inputs data.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The above example shows the usage of Form events such as Input and Submit displaying the output accordingly.<\/p>\n\n\n\n

In this way, events can be used to trigger specific built-in methods in javascript.<\/p>\n","protected":false},"excerpt":{"rendered":"

What are Events?Events are actions or occurrences detected by JavaScript, such as user interactions. It allows us to make our […]<\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-8675","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2fV","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/503"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8675"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8675\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}