https://github.com/dealfonso/on-event
A simple library to add the posibility of using on-<event-handler> attributes in html tags for any event handler
https://github.com/dealfonso/on-event
event-handlers events html html-javascript javascript jquery jquery-plugin
Last synced: 4 months ago
JSON representation
A simple library to add the posibility of using on-<event-handler> attributes in html tags for any event handler
- Host: GitHub
- URL: https://github.com/dealfonso/on-event
- Owner: dealfonso
- License: mit
- Created: 2023-09-06T08:52:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-07T08:19:05.000Z (over 2 years ago)
- Last Synced: 2024-12-30T06:11:52.802Z (about 1 year ago)
- Topics: event-handlers, events, html, html-javascript, javascript, jquery, jquery-plugin
- Language: HTML
- Homepage:
- Size: 10.7 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Inline Event Handlers (on-event)
This library enables the possibility of using `on-` 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.
While 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:
```html
```
```javascript
document.querySelector('img').addEventListener('my-event', function() {
alert('my-event');
});
```
Using this library, you can do the same using the following code:
```html
```
## Key features
### In-line event handlers for custom events
The 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:
```html
...
```
```javascript
$('#myModal').on('hidden.bs.modal', function () {
alert('hidden');
});
```
That forces to use JavaScript code to add the event handler. Using this library, you can do the same using the following code:
```html
...
```
### Avoid the need to add an unnecessary ID to the element
Many 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:
```html
Click me
```
```javascript
document.querySelector('#myButton').addEventListener('click', function() {
alert('clicked');
});
```
This 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:
```html
Click me
```
### Activate/Deactivate event handlers
Another 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:
```javascript
document.querySelector('img').onEvent.deactivate('click');
(...)
document.querySelector('img').onEvent.activate('click');
```
## Usage
To 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:
```html
```
### Declarative HTML Version
The 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-` attribute to the element that you want to add an event handler. For example:
```html
```
Will be equivalent to the following JavaScript code:
```javascript
document.querySelector('img').addEventListener('click', function() {
alert('clicked');
});
```
### JavaScript
The library adds the `onEvent` property to the `Element` prototype. This property is an object that contains the following methods:
* `activate(eventName = null)`: Activates the event handlers for the selected element (only those added using this library).
* `deactivate(eventName = null)`: Deactivates the event handlers for the selected element (only those added using this library).
For example:
```javascript
document.querySelector('img').onEvent.activate();
```
If 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.
This will only affect those handlers added using `on-` attributes.
### jQuery Version
The 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:
* `onEvent("activate", eventName)`: Activates the event handlers for the selected elements (only those added using this library).
* `onEvent("deactivate", eventName)`: Deactivates the event handlers for the selected elements (only those added using this library).
For example:
```javascript
$('img').onEvent('activate');
```
If 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.
This will only affect those handlers added using `on-` attributes.
## Advanced usage
Luckily, most event names are in lowercase and can be used directly in the `on-` attribute. However, some event names are not in lowercase or have some special characters. One noticeable case is the well-known `DOMContentLoaded` event.
If 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`.
In these cases, you can use the `on-:map` attribute to provide the real event name. For example:
```html
```
Will be equivalent to the following JavaScript code:
```javascript
document.querySelector('img').addEventListener('DOMContentLoaded', function() {
alert('DOMContentLoaded');
});
```
__(*)__ 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-:map` attribute.