{"id":20804439,"url":"https://github.com/sequencemedia/rasher","last_synced_at":"2026-03-03T15:04:16.613Z","repository":{"id":37936387,"uuid":"92208563","full_name":"sequencemedia/rasher","owner":"sequencemedia","description":"A set of utilities for managing browser DOM event listeners and delegates","archived":false,"fork":false,"pushed_at":"2026-01-02T03:28:44.000Z","size":4330,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-05T20:27:36.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sequencemedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-05-23T18:54:15.000Z","updated_at":"2026-01-02T03:28:45.000Z","dependencies_parsed_at":"2024-03-16T06:25:03.414Z","dependency_job_id":"f8af9234-8339-4792-9ed5-d215a3fda842","html_url":"https://github.com/sequencemedia/rasher","commit_stats":{"total_commits":841,"total_committers":4,"mean_commits":210.25,"dds":"0.027348394768133222","last_synced_commit":"1ce4bc1461eddc6a4fbf737210bd13a88f8b10eb"},"previous_names":["sequencemedia/rasherjs"],"tags_count":322,"template":false,"template_full_name":null,"purl":"pkg:github/sequencemedia/rasher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Frasher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Frasher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Frasher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Frasher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sequencemedia","download_url":"https://codeload.github.com/sequencemedia/rasher/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Frasher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30050222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T14:38:37.398Z","status":"ssl_error","status_checked_at":"2026-03-03T14:38:06.721Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T19:09:22.617Z","updated_at":"2026-03-03T15:04:16.596Z","avatar_url":"https://github.com/sequencemedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rasher\n\nRasher is a small set of utilities for managing browser DOM event listeners and delegates.\n\nIt's written in ES6 for projects which don't warrant React or Angular but may have lots of forms with user interactions.\n\nWherever possible, Rasher queries the DOM using the browser's native DOM methods; otherwise, it uses [Sizzle](https://sizzlejs.com/).\n\nRasher's components are exposed as ES6 classes, too, so if you want to you can use them directly.\n\n## Rasher\n\n### Listeners and Delegates\n\n`Listeners` are event handlers bound to the element raising an event. You might attach a listener to each `\u003cli /\u003e` in a `\u003cul /\u003e`, for example, or perhaps more appropriately it would be bound to a specific element inviting a particular action, like a button or a link.\n\n\n`Delegates` are event handlers bound to a container as though they were bound to the contained element. You might attach a delegate to the `\u003cul /\u003e` for events raised by any of its `\u003cli /\u003e` children. Perhaps it would be bound to a form, listening for changes to some radio inputs.\n\nWith Rasher, `listeners` and `delegates` are indistinguishable, and have only a simple difference in how they are applied.\n\n#### Listeners\n\n```javascript\nimport Rasher from 'rasher'\n\nconst rasher = new Rasher()\n\nrasher\n  .find('form input[type=\"submit\"]')\n  .then((r) =\u003e {\n    r.on('click').do((e) =\u003e { e.stop() })\n  })\n```\n\nFirst, we use `find` to query the DOM for elements, using a selector.\n\nSecond, we use `then` to interact with the DOM elements which have been found.\n\n#### Delegates\n\n```javascript\nimport Rasher from 'rasher'\n\nconst rasher = new Rasher()\n\nrasher\n  .find('form input[type=\"radio\"]')\n  .delegateTo('form')\n  .then((r) =\u003e {\n    r.on('click').do((e) =\u003e { e.stop() })\n  })\n```\n\nHere, there is an additional method call between `find` and `then`: it is `delegateTo`.\n\nWe use `delegateTo` to query the DOM for an element, using a selector, exactly as we do with `find`.\n\n\n### Attaching handlers\n\nIn either case, whether we want to attach a `listener` or a `delegate`, we do the work with the function given to `then`.\n\nThe function given to `then` is the `callOut`.\n\nThe `callOut` is called once for each DOM element matching the query. It receives three arguments:\n\n1. A plain object\n2. An `index`\n2. A `length`\n\nSo:\n\n```javascript\nrasher\n  .find('form input[type=\"radio\"]')\n  .then((r, index, length) =\u003e {\n    /* */\n  })\n```\n\nThe plain object is named `r`. The `index` identifies the position of the current _element_ as though iterating through an array, while `length` is the total number of _elements_ to iterate over.\n\nOr:\n\n```javascript\nrasher\n  .find('form input[type=\"radio\"]')\n  .delegateTo('form')\n  .then((r, index, length) =\u003e {\n    /* */\n  })\n```\n\nThe plain object is named `r`. Here, the `index` identifies the position of the current _delegate element_ as though iterating through an array, while `length` is the total number of _delegate elements_ to iterate over.\n\nIn either case, the plain object is the entry point for attaching handlers. It follows the pattern `on` ... `do`.\n\n```javascript\nr.on('click').do((event) =\u003e { /* */ })\n```\n\n### Detaching handlers\n\nSimilarly, whether we want to detach a `listener` or a `delegate`, we do the work with the return value from `then`.\n\n```javascript\nconst R = rasher\n  .find('form input[type=\"radio\"]')\n  .then((r, index, length) =\u003e {\n    /* */\n  })\n\nR.stopAll()\n```\n\nThe return value of `then` is a plain object, named `R`.\n\nInvoking `stopAll` will detach handlers from all listener and delegate elements in the collection, `R`.\n\nIndividual handlers are identified by index, and invoking `listAll` will return a plain object with methods for accessing the items in the collection.\n\n```javascript\n{\n  size () { },\n  node (index) { },\n  type (index) { },\n  stop (index) { },\n  indexOf (element) { }\n}\n```\n\n1. `size` returns the length of the whole collection\n2. `node` returns the DOM element at this position\n3. `type` returns the DOM event type at this position\n4. `stop` removes the handler, as well as the object at this position in the collection\n\nIf `size()` returns `1` then we can call `stop(0)` to remove both the handler from the DOM and the item from the collection. In this case, the return value from `stop(0)` will be true.\n\nAnother invocation of `size()` will return `0`, and another invocation of `stop(0)` will return false.\n\nWe can find the position of a specific DOM element in the collection by giving it as an argument to `indexOf`. Since the collection is a dynamically resizing array, the position of each element in the collection might change whenever `stop` is called.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Frasher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsequencemedia%2Frasher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Frasher/lists"}