{"id":13447234,"url":"https://github.com/Financial-Times/ftdomdelegate","last_synced_at":"2025-03-21T17:31:04.959Z","repository":{"id":6270748,"uuid":"7504222","full_name":"Financial-Times/ftdomdelegate","owner":"Financial-Times","description":"Create and manage a DOM event delegator","archived":true,"fork":false,"pushed_at":"2021-11-17T16:50:26.000Z","size":553,"stargazers_count":321,"open_issues_count":5,"forks_count":36,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-03-10T09:50:42.261Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"abel533/Mybatis-Spring","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Financial-Times.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":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2013-01-08T15:48:15.000Z","updated_at":"2024-12-15T11:07:48.000Z","dependencies_parsed_at":"2022-08-31T00:01:31.864Z","dependency_job_id":null,"html_url":"https://github.com/Financial-Times/ftdomdelegate","commit_stats":null,"previous_names":["ftlabs/ftdomdelegate","ftlabs/dom-delegate"],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Fftdomdelegate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Fftdomdelegate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Fftdomdelegate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Fftdomdelegate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Financial-Times","download_url":"https://codeload.github.com/Financial-Times/ftdomdelegate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244734071,"owners_count":20501014,"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","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-07-31T05:01:11.642Z","updated_at":"2025-03-21T17:31:02.611Z","avatar_url":"https://github.com/Financial-Times.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ftdomdelegate\n\nFT's dom delegate library is a component for binding to events on all target elements matching the given selector, irrespective of whether anything exists in the DOM at registration time or not. This allows developers to implement the [event delegation pattern](http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/).\n\n- [Usage](#usage)\n- [JavaScript](#javascript)\n- [Migration](#migration)\n- [Contact](#contact)\n- [Licence](#licence)\n\n## Usage\n\nCheck out [how to include Origami components in your project](https://origami.ft.com/docs/components/#including-origami-components-in-your-project) to get started with `ftdomdelegate`.\n\n## JavaScript\n\nTo import ftdomdelegate:\n\n```js\nimport Delegate from 'ftdomdelegate';\nlet myDel = new Delegate(document.body);\n```\n\nTo instantiate `Delegate` on the `body` and listen to some events:\n\n```js\nfunction handleButtonClicks(event) {\n  // Do some things\n}\n\nfunction handleTouchMove(event) {\n  // Do some other things\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  var delegate = new Delegate(document.body);\n  delegate.on('click', 'button', handleButtonClicks);\n\n  // Listen to all touch move\n  // events that reach the body\n  delegate.on('touchmove', handleTouchMove);\n});\n```\n\nA cool trick to handle images that fail to load:\n\n```js\nfunction handleImageFail() {\n  this.style.display = 'none';\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  var delegate = new Delegate(document.body);\n  delegate.on('error', 'img', handleImageFail);\n});\n```\n\n### .on(eventType[, selector], handler[, useCapture])\n\n#### `eventType (string)`\n\nThe event to listen for e.g. `mousedown`, `mouseup`, `mouseout`, `error`, `click`, etc.\n\n#### `selector (string)`\n\nAny kind of valid CSS selector supported by [`matchesSelector`](http://caniuse.com/matchesselector). Some selectors, like `#id` or `tag` will use optimized functions internally that check for straight matches between the ID or tag name of elements.\n\n`null` is also accepted and will match the root element set by `root()`.  Passing a handler function into `.on`'s second argument is equivalent to `.on(eventType, null, handler)`.\n\n#### `handler (function)`\n\nFunction that will handle the specified event on elements matching the given selector.  The function will receive two arguments: the native event object and the target element, in that order.\n\n#### `useCapture (boolean)`\n\nWhether or not to listen during the capturing (pass in `true`) or bubbling phase (pass in `false`).  If no value passed in, it will fallback to a 'sensible default', which is `true` for `error`, `blur` and `focus` events and `false` for all other types.\n\n### .off([eventType][, selector][, handler][, useCapture])\n\nCalling `off` with no arguments will remove all registered listeners, effectively resetting the instance.\n\n#### `eventType (string)`\n\nRemove handlers for events matching this type considering the other parameters.\n\n#### `selector (string)`\n\nOnly remove listeners registered with the given selector, among the other arguments.\n\nIf null passed listeners registered to the root element will be removed.  Passing in a function into `off`'s second parameter is equivalent to `.off(eventType, null, handler[, useCapture])` (the third parameter will be ignored).\n\n#### `handler (function)`\n\nOnly remove listeners registered with the given handler function, among the other arguments.  If not provided, remove all handlers.\n\n#### `useCapture (boolean)`\n\nOnly remove listeners with `useCapture` set to the value passed in.  If not provided, remove listeners added with `useCapture` set to `true` and `false`.\n\n### .root([element])\n\n#### `element (Node)`\n\nSet the delegate's root node.  If no element passed in the root node will be deleted and the event listeners will be removed.\n\n### .destroy()\n\nShort hand for off() and root(), ie both with no parameters. Used to reset the delegate object.\n\n## Credits and collaboration\n\nFT DOM Delegate was developed by [FT Labs](http://labs.ft.com/), part of the Financial Times. It's now maintained by the [Origami Team](https://origami.ft.com/). The developers of ftdomdelegate were [Matthew Andrews](https://twitter.com/andrewsmatt) and [Matthew Caruana Galizia](http://twitter.com/mcaruanagalizia). Test engineering by [Sam Giles](https://twitter.com/SamuelGiles_). The API is influenced by [jQuery Live](http://api.jquery.com/live/).\n\n## Migration guide\n\nState | Major Version | Last Minor Release | Migration guide |\n:---: | :---: | :---: | :---:\n✨ active | 5 | N/A | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |\n⚠ maintained | 4 | 4.0.6 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |\n⚠ maintained | 3 | 3.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |\n╳ deprecated | 2 | 2.2 | N/A |\n╳ deprecated | 1 | 1.0 | N/A |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFinancial-Times%2Fftdomdelegate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFinancial-Times%2Fftdomdelegate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFinancial-Times%2Fftdomdelegate/lists"}