{"id":22296430,"url":"https://github.com/knowledgecode/delegate","last_synced_at":"2025-07-29T01:32:30.162Z","repository":{"id":35088466,"uuid":"203373333","full_name":"knowledgecode/delegate","owner":"knowledgecode","description":"Event delegation library for the browser","archived":false,"fork":false,"pushed_at":"2025-03-02T08:54:31.000Z","size":324,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-30T17:18:46.593Z","etag":null,"topics":["delegation","events","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knowledgecode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2019-08-20T12:38:32.000Z","updated_at":"2025-03-02T08:54:34.000Z","dependencies_parsed_at":"2024-12-03T17:45:42.879Z","dependency_job_id":"cab2477d-d1ad-4c63-b855-90c368b58616","html_url":"https://github.com/knowledgecode/delegate","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":"0.038461538461538436","last_synced_commit":"00fd54f11294b9365b09466a812c7b9e5ae618c3"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/knowledgecode/delegate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fdelegate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fdelegate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fdelegate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fdelegate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knowledgecode","download_url":"https://codeload.github.com/knowledgecode/delegate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fdelegate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267616580,"owners_count":24116154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["delegation","events","javascript"],"created_at":"2024-12-03T17:45:34.226Z","updated_at":"2025-07-29T01:32:29.854Z","avatar_url":"https://github.com/knowledgecode.png","language":"JavaScript","readme":"# Delegate\n\n[![build](https://github.com/knowledgecode/delegate/actions/workflows/node.js.yml/badge.svg)](https://github.com/knowledgecode/delegate/actions/workflows/node.js.yml)\n[![npm](https://img.shields.io/npm/v/@knowledgecode/delegate)](https://www.npmjs.com/package/@knowledgecode/delegate)\n\nThis is an event delegation library for the browser. The interface is similar to that of `jQuery`, making it easy to learn.\n\n## Installation\n\nvia npm:\n\n```shell\nnpm i @knowledgecode/delegate\n```\n\n## Usage\n\n```javascript\nimport delegate from '@knowledgecode/delegate';\n```\n\nES Modules:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import delegate from '/path/to/esm/delegate.js';\n\n  delegate(document).on('click', '#button', () =\u003e {\n    alert('Clicked!');\n  });\n\u003c/script\u003e\n```\n\nTraditional:\n\n```html\n\u003cscript src=\"/path/to/umd/delegate.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  delegate(document).on('click', '#button', () =\u003e {\n    alert('Clicked!');\n  });\n\u003c/script\u003e\n```\n\n## API\n\n### `delegate`\n\nCreates a delegate instance.\n\n* {**Object**} baseEventTarget - A base element that receives events\n\n```javascript\nconst body = delegate(document.body);\n```\n\n```javascript\nconst container = delegate(document.querySelector('.container'));\n```\n\n### `on`\n\nRegisters an event listener.\n\n* {**string**} eventName - An event name\n* {**string|Function**} selector - A selector to match | An event listener\n* {**Function**} [handler] - An event listener\n\n```javascript\nconst body = delegate(document.body);\n\nbody.on('click', '#button', () =\u003e {\n  alert('Clicked!');\n});\n\n// If the base element itself handles the event:\nbody.on('click', () =\u003e {\n  alert('Clicked');\n});\n```\n\n### `one`\n\nRegisters an event listener that is fired only once.\n\n* {**string**} eventName - An event name\n* {**string|Function**} selector - A selector to match | An event listener, which is fired only once.\n* {**Function**} [handler] - An event listener, which is fired only once.\n\n```javascript\nconst container = delegate(document.querySelector('.container'));\n\ncontainer.one('click', '#button', () =\u003e {\n  alert('Clicked!');\n});\n\n// If the base element itself handles the event:\ncontainer.one('click', () =\u003e {\n  alert('Clicked');\n});\n```\n\n### `off`\n\nRemoves registered event listeners.\n\n* {**string**} [eventName] - An event name. If omit it, all the listeners will be removed.\n* {**string|Function**} [selector] - A selector to match | An event listener\n* {**Function**} [handler] - An event listener. If omit it, all the listeners that are corresponded to the `eventName` will be removed.\n\n```javascript\nconst handler1 = () =\u003e alert('Clicked!');\nconst handler2 = () =\u003e alert('Clicked!');\nconst handler3 = () =\u003e alert('Mouse Over!');\n\ndelegate(document)\n  .on('click', '#button', handler1)         // No.1\n  .on('click', '#button', handler2)         // No.2\n  .on('mouseover', '#button', handler3)     // No.3\n  .on('click', handler1);                   // No.4\n\n// To remove only event No.1:\ndelegate(document).off('click', '#button', handler1);\n\n// To remove only event No.4:\ndelegate(document).off('click', handler1);\n\n// To remove all click events registered to #button (No.1 and No.2):\ndelegate(document).off('click', '#button');\n\n// To remove all click events (No.1, No.3 and No.4):\ndelegate(document).off('click');\n\n// To remove all events:\ndelegate(document).off();\n```\n\n### `clear`\n\nRemoves all registered event listeners. It is almost the same as `off()`.\n\n```javascript\ndelegate(document).clear();\n```\n\n## Event Object\n\nListeners receive an event object when an event is fired. This object provides the following methods and properties:\n\n### `Methods`\n\n* `preventDefault()`\n* `stopPropagation()`\n* `stopImmediatePropagation()`\n\n### `Properties`\n\n* `originalEvent` - a genuine event object when an event is fired\n* `currentTarget` - the current element\n\n```javascript\ndelegate(document)\n  .on('click', 'a', evt =\u003e {\n      evt.preventDefault();\n  })\n  .on('mousedown', '#area', evt =\u003e {\n      if (evt.originalEvent.pageX \u003c 48 \u0026\u0026 evt.originalEvent.pageY \u003c 48) {\n        console.log('Shoot!');\n      }\n  })\n  .on('blur', 'input[type=\"text\"]', evt =\u003e {\n      // evt.currentTarget === this\n      console.log(evt.currentTarget.value);\n  })\n```\n\n## Passive Listener\n\nYou can specify a passive listener like this:\n\n```javascript\nconst listener = evt =\u003e {\n  // Error (It cannot be prevent this event).\n  evt.preventDefault();\n};\n\ndelegate(document)\n  .on('touchstart:passive', '.touch-area', listener);\n```\n\nNote that the `touchstart:passive` is clearly distinguished from `touchstart`. If you want to remove this listener, you need to write like this:\n\n```javascript\ndelegate(document)\n  .off('touchstart:passive', '.touch-area', listener);\n```\n\n## Method Chaining\n\nThis library supports method chaining like `jQuery`.\n\n```javascript\ndelegate(document)\n  .on('mousedown', '#button', () =\u003e {\n    alert('Mouse down!');\n  })\n  .on('mouseover', '#button', () =\u003e {\n    alert('Mouse over!');\n  })\n  .on('mouseup', '#button', () =\u003e {\n    alert('Mouse up!');\n  });\n```\n\n## Browser Support\n\nChrome, Firefox, Safari, Edge\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowledgecode%2Fdelegate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknowledgecode%2Fdelegate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowledgecode%2Fdelegate/lists"}