{"id":18828406,"url":"https://github.com/dealfonso/on-event","last_synced_at":"2026-05-17T09:38:19.349Z","repository":{"id":193222454,"uuid":"687907569","full_name":"dealfonso/on-event","owner":"dealfonso","description":"A simple library to add the posibility of using on-\u003cevent-handler\u003e attributes in html tags for any event handler","archived":false,"fork":false,"pushed_at":"2023-09-07T08:19:05.000Z","size":11,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-30T06:11:52.802Z","etag":null,"topics":["event-handlers","events","html","html-javascript","javascript","jquery","jquery-plugin"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/dealfonso.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":"2023-09-06T08:52:58.000Z","updated_at":"2024-07-18T21:11:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"cff1c109-f66b-4530-af9b-d64265caa1d8","html_url":"https://github.com/dealfonso/on-event","commit_stats":null,"previous_names":["dealfonso/on-event"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fon-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fon-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fon-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fon-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dealfonso","download_url":"https://codeload.github.com/dealfonso/on-event/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239763648,"owners_count":19692812,"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":["event-handlers","events","html","html-javascript","javascript","jquery","jquery-plugin"],"created_at":"2024-11-08T01:24:56.805Z","updated_at":"2025-10-24T05:01:16.088Z","avatar_url":"https://github.com/dealfonso.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inline Event Handlers (on-event)\n\nThis library enables the possibility of using `on-\u003cevent-handler\u003e` attributes in HTML tags for any event handler. It is possible to use common events (e.g. `click`, `mouseover`, etc.), but this is of special interest when adding event handlers for custom events or events that have no attribute equivalence in the HTML tags.\n\nWhile it is not well seen using inline event handlers in HTML tags, sometimes it is the easiest way to do something and a more readable method. For example, if you want to show an alert when the custom event `my-event` is triggered, you would need to do something like this:\n\n```html\n\u003cimg src=\"https://picsum.photos/400/200\" class=\"mx-auto\"\u003e\n```\n\n```javascript\ndocument.querySelector('img').addEventListener('my-event', function() {\n    alert('my-event');\n});\n```\n\nUsing this library, you can do the same using the following code:\n\n```html\n\u003cimg src=\"https://picsum.photos/400/200\" class=\"mx-auto\" on-my-event=\"alert('my-event')\"\u003e\n```\n\n## Key features\n\n### In-line event handlers for custom events\n\nThe more important benefit is when you have custom events or events that have no attribute equivalence in the HTML tags that this library is useful. For example, if you want to show an alert when a bootstrap dialog is hidden, you would need to do something like this:\n\n```html\n\u003cdiv class=\"modal fade\"\u003e\n    ...\n\u003c/div\u003e\n```\n```javascript\n$('#myModal').on('hidden.bs.modal', function () {\n    alert('hidden');\n});\n```\n\nThat forces to use JavaScript code to add the event handler. Using this library, you can do the same using the following code:\n\n```html\n\u003cdiv class=\"modal fade\" on-hidden.bs.modal=\"alert('hidden')\"\u003e\n    ...\n\u003c/div\u003e\n```\n\n### Avoid the need to add an unnecessary ID to the element\n\nMany times you need to add an ID to an element just to add an event handler. For example, if you want to call a function when a button is clicked, you would need to do something like this:\n\n```html\n\u003cbutton id=\"myButton\"\u003eClick me\u003c/button\u003e\n```\n```javascript\ndocument.querySelector('#myButton').addEventListener('click', function() {\n    alert('clicked');\n});\n```\n\nThis implies that we needed to add the `myButton` id to a button, while it is not necessary for anything else. Using inline handlers, that fictitious `id` will not be needed. Using this library, you can do the same using the following code:\n\n```html\n\u003cbutton on-click=\"alert('clicked')\"\u003eClick me\u003c/button\u003e\n```\n\n### Activate/Deactivate event handlers\n\nAnother advantage of this library is that it allows you to activate/deactivate the event handlers for an element. This is useful when you want to disable some functionality temporarily. For example, if you want to disable the click event handler for an image, you can do it using the following code:\n\n```javascript\ndocument.querySelector('img').onEvent.deactivate('click');\n(...)\ndocument.querySelector('img').onEvent.activate('click');\n```\n\n## Usage\n\nTo use the library, you just need to include the `on-event.js` file in your Web page. You can download it from the [GitHub repository](https://github.com/dealfonso/on-event) or get it from the CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/dealfonso/on-event@0.1/dist/on-event.min.js\"\u003e\u003c/script\u003e\n```\n\n### Declarative HTML Version\n\nThe declarative version is the easiest way to use the library. Moreover, this is the reason for this library. You just need to add the `on-\u003cevent-name\u003e` attribute to the element that you want to add an event handler. For example:\n\n```html\n\u003cimg src=\"https://picsum.photos/400/200\" class=\"mx-auto\" on-click=\"alert('clicked')\"\u003e\n```\n\nWill be equivalent to the following JavaScript code:\n\n```javascript\ndocument.querySelector('img').addEventListener('click', function() {\n    alert('clicked');\n});\n```\n\n### JavaScript\n\nThe library adds the `onEvent` property to the `Element` prototype. This property is an object that contains the following methods:\n\n* `activate(eventName = null)`: Activates the event handlers for the selected element (only those added using this library).\n* `deactivate(eventName = null)`: Deactivates the event handlers for the selected element (only those added using this library).\n\nFor example:\n\n```javascript\ndocument.querySelector('img').onEvent.activate();\n```\n\nIf the `eventName` parameter is not specified, all the event handlers will be activated/deactivated. Otherwise, only the event handlers for the specified event will be activated/deactivated.\n\nThis will only affect those handlers added using `on-\u003cevent-name\u003e` attributes.\n\n### jQuery Version\n\nThe library also includes a plugin for jQuery, if it is available. This plugin adds the `onEvent` method to the jQuery object with the following options:\n\n* `onEvent(\"activate\", eventName)`: Activates the event handlers for the selected elements (only those added using this library).\n* `onEvent(\"deactivate\", eventName)`: Deactivates the event handlers for the selected elements (only those added using this library).\n\nFor example:\n\n```javascript\n$('img').onEvent('activate');\n```\n\nIf the `eventName` parameter is not specified, all the event handlers will be activated/deactivated. Otherwise, only the event handlers for the specified event will be activated/deactivated.\n\nThis will only affect those handlers added using `on-\u003cevent-name\u003e` attributes.\n\n## Advanced usage\n\nLuckily, most event names are in lowercase and can be used directly in the `on-\u003cevent-name\u003e` attribute. However, some event names are not in lowercase or have some special characters. One noticeable case is the well-known `DOMContentLoaded` event. \n\nIf you know about javascript programming, the attribute names of the HTMLElements always arrive to the application in lowercase. So event if we write `on-DOMContentLoaded`, the attribute name will be `on-domcontentloaded`. \n\nIn these cases, you can use the `on-\u003cevent-name\u003e:map` attribute to provide the real event name. For example:\n\n```html\n\u003cimg src=\"https://picsum.photos/400/200\" class=\"mx-auto\" on-DOMContentLoaded:map=\"DOMContentLoaded\" on-DOMContentLoaded=\"alert('DOMContentLoaded')\"\u003e\n```\n\nWill be equivalent to the following JavaScript code:\n\n```javascript\ndocument.querySelector('img').addEventListener('DOMContentLoaded', function() {\n    alert('DOMContentLoaded');\n});\n```\n\n__(*)__ This is a fictitious case because the `DOMContentLoaded` event is not available for the `img` element. But this is just an example to show the reasoning behind the `on-\u003cevent-name\u003e:map` attribute.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fon-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdealfonso%2Fon-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fon-event/lists"}