{"id":19419677,"url":"https://github.com/rwu823/delegate-to","last_synced_at":"2025-08-18T16:05:09.476Z","repository":{"id":9298316,"uuid":"61527525","full_name":"rwu823/delegate-to","owner":"rwu823","description":":arrow_heading_up: DOM Event delegate, it works great in React and Vue","archived":false,"fork":false,"pushed_at":"2023-12-15T20:35:32.000Z","size":60,"stargazers_count":31,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-24T15:14:31.055Z","etag":null,"topics":["delegate","delegated-events","dom","event"],"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/rwu823.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":"2016-06-20T07:57:57.000Z","updated_at":"2021-07-08T06:04:30.000Z","dependencies_parsed_at":"2024-11-10T13:29:00.593Z","dependency_job_id":null,"html_url":"https://github.com/rwu823/delegate-to","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":"0.18181818181818177","last_synced_commit":"1fa99236b37fe6f36acf9e72e4f7f2c7373f1401"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rwu823/delegate-to","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Fdelegate-to","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Fdelegate-to/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Fdelegate-to/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Fdelegate-to/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rwu823","download_url":"https://codeload.github.com/rwu823/delegate-to/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Fdelegate-to/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271019393,"owners_count":24685678,"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-08-18T02:00:08.743Z","response_time":89,"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":["delegate","delegated-events","dom","event"],"created_at":"2024-11-10T13:18:37.558Z","updated_at":"2025-08-18T16:05:09.432Z","avatar_url":"https://github.com/rwu823.png","language":"JavaScript","readme":"[![version](https://img.shields.io/npm/v/delegate-to.svg?label=version)](https://www.npmjs.org/package/delegate-to) [![Build Status](https://img.shields.io/travis/rwu823/delegate-to.svg?branch=master)](https://travis-ci.org/rwu823/delegate-to/) [![Coverage](https://img.shields.io/coveralls/rwu823/delegate-to.svg)](https://coveralls.io/github/rwu823/delegate-to)\n\n# delegate-to\nDOM Event delegate, it works great in React, too\n\n✅Clever API\n\n✅Zero dependence\n\n✅React Server-side rendering compatible\n\n✅All browsers supported\n\n\n\n## Compare with others\n\n[zenorocha/delegate](https://github.com/zenorocha/delegate) is a popular library for delegate event:\n\n```javascript\ndelegate(document.body, '.btn', 'click', function(e) {\n  console.log(e.delegateTarget)\n}, false)\n```\n\nWorks in React.js\n\n```javascript\nrender () {\n  \u003cdiv\u003e\n    \u003cdiv ref=\"foo\" /\u003e\n  \u003c/div\u003e\n}\n\ncomponentDidMount() {\n  delegate(this.refs.foo, '.btn', 'click', this.handleClick, false)\n}\n```\n\n\n\n### Switch to `delegate-to`\n\n```javascript\ndocument.body.addEventListener('click', delegate('.btn', e =\u003e {\n  console.log(e.delegateTarget)\n}), false)\n```\n\nThen in React.js\n\n```javascript\nrender () {\n  \u003cdiv\u003e\n    \u003cdiv onClick={delegate('.btn', this.handelClick)} /\u003e\n  \u003c/div\u003e\n}\n```\n\nYou can see the advantage in `delegate-to`\n\n- Fewer API interface (only 2 arguments)\n\n- Works with normal `addEventListener`\n\n- React(.jsx) friendly\n\n- Flexibly, custom match condition\n\n  ​\n\n## Installation\n\n```sh\n$ npm i --save delegate-to\n```\n\n\n\n## Examples\n\n```javascript\nimport delegate from 'delegate-to'\n  \nrender () {\n  \u003cdiv\u003e\n    \u003cdiv onClick={delegate('.btn', this.handelClick)} /\u003e\n  \u003c/div\u003e\n}\n    \n// custom match condition\nrender () {\n  \u003cdiv\u003e\n    \u003cdiv onClick={delegate(target =\u003e target.classList.contains('btn'), this.handelClick)} /\u003e\n  \u003c/div\u003e\n}\n```\n\n\n## API\n\n### delegate([selector || condition func], [dispatchEvent])\n\n\n\n## Browsers Supported\n\n`delegate-to` use native `el.matchs` DOM API to match `CSS selector`, it works on **IE 9+** and All morden browsers, you can try custom match condition function if you need to work with old browsers.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frwu823%2Fdelegate-to","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frwu823%2Fdelegate-to","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frwu823%2Fdelegate-to/lists"}