{"_id":"jsaction","_rev":"3-8e8426eb07b1c1fe2360a86d0749d3b6","name":"jsaction","time":{"modified":"2022-05-06T20:04:36.388Z","created":"2017-07-09T15:34:01.323Z","0.0.1":"2017-07-09T15:34:01.323Z","0.0.2":"2017-07-09T15:49:33.911Z"},"maintainers":[{"name":"mknichel","email":"mknichel@users.noreply.github.com"}],"dist-tags":{"latest":"0.0.2"},"description":"Google's event delegation library","readme":"# JsAction\n\nJsAction is a tiny event delegation library that allows decoupling the DOM nodes\non which the action occurs from the JavaScript code that handles the action.\n\nThe traditional way of adding an event handler is to obtain a reference to the\nnode and add the event handler to it. JsAction allows us to map between events\nand names of handlers for these events via a custom HTML attribute called\n`jsaction`.\n\nSeparately, JavaScript code registers event handlers with given names which need\nnot be exposed globally. When an event occurs the name of the action is mapped\nto the corresponding handler which is executed.\n\nFinally, JsAction uncouples event handling from actual implementations. Thus one\nmay late load the implementations, while the app is always able to respond to\nuser actions marked up through JsAction. This can help in greatly reducing page\nload time, in particular for server side rendered apps.\n\n## Building\n\nJsAction is built using the [Closure\nCompiler](http://github.com/google/closure-compiler). You can obtain a recent\ncompiler from the site.\n\nJsAction depends on the [Closure\nLibrary](http://github.com/google/closure-library). You can obtain a copy of the\nlibrary from the GitHub repository.\n\nThe compiler is able to handle dependency ordering automatically with the\n`--only_closure_dependencies` flag. It needs to be provided with the sources and\nany entry points.\n\nSee the files dispatch_auto.js, eventcontract_auto.js, and\neventcontract_example.js for typical entry points.\n\nHere is a typical command line for building JsAction's dispatch_auto.js:\n\n
\n\n## Using drop-in scripts\n\nIf you would like to test out JsAction, you can link precompiled scripts into\nyour page.\n\n```html\n\n\n\n...\n\n\n```\n\n## Usage\n\nYou can play around with JsAction already set up with the following directions\nat https://jsfiddle.net/q2eacgs7/.\n\n## In the DOM\n\nActions are indicated with the `jsaction` attribute. They are separated by `;`,\nwhere each one takes the form:\n\n```\n[eventType:].\n```\n\nIf an `eventType` is not specified, JsAction will assume `click`.\n\n```html\n
\n
\n some content here\n
\n
\n```\n\n## In JavaScript\n\n### Set up\n\n```javascript\nconst eventContract = new jsaction.EventContract();\n\n// Events will be handled for all elements under this container.\neventContract.addContainer(document.getElementById('container'));\n\n// Register the event types we care about.\neventContract.addEvent('click');\neventContract.addEvent('dblclick');\n\nconst dispatcher = new jsaction.Dispatcher();\neventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));\n```\n\n### Register individual handlers\n\n```javascript\n/**\n * Do stuff when actions happen.\n * @param {!jsaction.ActionFlow} flow Contains the data related to the action\n * and more. See actionflow.js.\n */\nconst doStuff = function(flow) {\n // do stuff\n alert('doStuff called!');\n};\n\ndispatcher.registerHandlers(\n 'leftNav', // the namespace\n null, // handler object\n { // action map\n 'clickAction' : doStuff,\n 'doubleClickAction' : doStuff\n });\n```\n\n## Late loading the JsAction dispatcher and event handlers\n\nJsAction splits the event contract and dispatcher into two separably loadable\nbinaries. This allows applications to load the small event contract early on the\npage to capture events, and load the dispatcher and event handlers at a later\ntime. Since captured events are queued until the dispatcher loads, this pattern\ncan ensure that user events are not lost even if they happen before the primary\nevent handlers load.\n\nVisit http://jsfiddle.net/880m0tpd/4/ to try out a working example.\n\n### Load the contract early in the page\n\nJust like in the regular example, in this example the event contract is loaded\nvery early on the page, ideally in the head of the page.\n\n```html\n\n\n\n\n```\n\nThe event contract is configured to capture events for the entire page. Since\nthe dispatcher and event handlers are not loaded yet, the event contract will\njust queue the events if the user tries to interact with the page. These events\ncan then be replayed after the dispatcher and event handlers are loaded, which\nwill be shown in this example next. This will ensure that no user interaction is\nlost, even if it happens before the code is loaded.\n\n### Loading the dispatcher and replaying events\n\nAt any point later in the page, the dispatcher and event handlers can be loaded\nand any queued events can be replayed.\n\nAfter the dispatcher and event handler code loads, you will configure the\ndispatcher just like in the regular example:\n\n```javascript\n// This is the actual event handler code.\nfunction handleEvent() {\n alert('event handled!');\n}\n\n// Initialize the dispatcher, register the handlers, and then replay the queued events.\nconst dispatcher = new jsaction.Dispatcher();\neventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));\ndispatcher.registerHandlers(\n 'button',\n null,\n { 'handleEvent': handleEvent });\n```\n\nThere is some new code to replay the queued events:\n\n```javascript\n// This code replays the queued events. Applications can define custom replay\n// strategies.\nfunction replayEvents(events, jsActionDispatcher) {\n while (events.length) {\n jsActionDispatcher.dispatch(events.shift());\n }\n}\n\n// This will automatically trigger the event replayer to run if there are\n// queued events.\ndispatcher.setEventReplayer(replayEvents);\n```\n\nNow any events that happen during page load before the JS has loaded will be\nreplayed when the primary JS does load, ensuring that user interactions are not\nlost.\n","versions":{"0.0.2":{"name":"jsaction","description":"Google's event delegation library","version":"0.0.2","repository":{"type":"git","url":"git+https://github.com/google/jsaction.git"},"keywords":["javascript","event delegation"],"author":{"name":"Google","url":"JsAction authors"},"license":"Apache-2.0","bugs":{"url":"https://github.com/google/jsaction/issues"},"gitHead":"414f1c4a631ee0f00389266bace55c34cc43128b","homepage":"https://github.com/google/jsaction#readme","_id":"jsaction@0.0.2","_npmVersion":"5.1.0","_nodeVersion":"6.9.5","_npmUser":{"name":"mknichel","email":"mknichel@users.noreply.github.com"},"dist":{"integrity":"sha512-1DJZmDB5b5AqJbrygp5kx5OeoCUwxROfxT6hZDOfOhGktHkaulQdTKieyzWI8yaklkAHKFuFXtbbFer+QsWisA==","shasum":"9f389a3affab8ff4728238a440b8c587d2ef1fc6","tarball":"https://registry.npmjs.org/jsaction/-/jsaction-0.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdBW23/9t0/O51i7nggLFgTeX1QG2eBtkZZDNB91LjsAiEAgSd7SThEvpSRJXU/TUPsSkMzg2a/o67RNI4K2gseNv0="}]},"maintainers":[{"name":"mknichel","email":"mknichel@users.noreply.github.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsaction-0.0.2.tgz_1499615373784_0.12044822727330029"}}},"homepage":"https://github.com/google/jsaction#readme","keywords":["javascript","event delegation"],"repository":{"type":"git","url":"git+https://github.com/google/jsaction.git"},"author":{"name":"Google","url":"JsAction authors"},"bugs":{"url":"https://github.com/google/jsaction/issues"},"license":"Apache-2.0","readmeFilename":"README.md"}