{"id":21887,"date":"2014-05-30T09:30:38","date_gmt":"2014-05-30T07:30:38","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=21887"},"modified":"2014-05-30T09:30:38","modified_gmt":"2014-05-30T07:30:38","slug":"jsaction-a-tiny-event-delegation-library","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2014\/05\/30\/jsaction-a-tiny-event-delegation-library\/","title":{"rendered":"JsAction – a tiny event delegation library"},"content":{"rendered":"\n

JsAction<\/a> – a tiny event delegation library<\/p>\n

JsAction is a tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action.<\/p>\n

The traditional way of adding an event handler is to obtain a reference to the node and add the event handler to it. JsAction allows us to map between events and names of handlers for these events via a custom HTML attribute called jsaction<\/em>.<\/p>\n

Separately, JavaScript code registers event handlers with given names which need not be exposed globally. When an event occurs the name of the action is mapped to the corresponding handler which is executed.<\/p>\n

Finally, JsAction uncouples event handling from actual implementations. Thus one may late load the implementations, while the app is always able to respond to user actions marked up through JsAction. This can help in greatly reducing page load time, in particular for server side rendered apps.<\/p><\/blockquote>\n\n","protected":false},"excerpt":{"rendered":"\n

JsAction – a tiny event delegation library JsAction is a tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action. The traditional way of adding an event handler is to obtain a reference to the node and add the event handler to … Continue reading JsAction – a tiny event delegation library<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1139,1330],"keyring_services":[],"class_list":["post-21887","post","type-post","status-publish","format-link","hentry","category-general","category-programming","category-technology","category-web-work","tag-javascript","tag-web-development","post_format-post-format-link"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t