Comments (2)
I think there are a few options here, so I'm not sure it makes sense in the core library. The shape of the API might differ depending on how you want to handle EventListenerOptions
or if you want to do event delegation. I think this is likely something for a higher level library to tackle. One thing to watch out for is making sure event listeners are correctly cleaned up. For example, if you had:
elementOpen('div');
bindEvents({
onclick: () => {...}
});
elementClose('div');
and your next call is:
elementOpen('div');
elementClose('div');
You would want to make sure to remove the event listeners. For a higher level library, this probably is not too big of a deal since it likely does not use elementOpen
directly and has another function call wrapping it instead.
Another option is something like:
import {attributes} from 'incremental-dom';
export const eventListeners = Symbol();
attributes[eventListeners] = function(el, unused, newValue = {}) {
const oldValue = el[eventListeners];
// remove any missing listeners, add any new ones
el[eventListeners] = newValue;
};
which could then used as (directly or through a higher level API):
import {eventListeners} from '...';
elementOpen('div', null, null, eventListeners, {
click: () => {},
mousedown: {} => {},
});
from incremental-dom.
Thanks @sparhami, that was quite useful actually.
I ended up with the following code to achieve what i was looking for:
import {attributes} from 'incremental-dom';
export const eventListeners = Symbol();
attributes[eventListeners] = function (el, attribute, events) {
for (let event in events) {
let eventCallback = events[event];
el[event] = function () {
if (Array.isArray(eventCallback)) {
for (let callback of eventCallback) {
callback.apply(this);
}
} else {
eventCallback.apply(this);
}
};
}
};
Now from anywhere else it could be as any of the following:
import {eventListeners} from '...';
elementVoid('input', null, null, eventListeners, {
onchange: function () {
console.log(this.value);
},
});
Or passing an array of callbacks for each event
import {eventListeners} from '...';
elementVoid('input', null, null, eventListeners, {
onchange: [function () {
console.log(this.value);
}, function () {
// do something else
}],
});
But i want to ask why wouldn't that be in the core library?
I mean it will make it much easier for developer to handle events much easier.
I think same applies to boolean
attributes which also could be easily done throughout the same concept of handling events, what do you think?
from incremental-dom.
Related Issues (20)
- Is Angular 8 Ivy render engine going to effectively replace this project? HOT 2
- Ignoring certain attributes HOT 6
- Update dependencies to remove security warnings
- Extended custom element creation HOT 5
- Issues with webpack and babel HOT 3
- Document: `elementVoid` is incorrect. HOT 2
- Setting prop using Boolean (to trigger prop over attribute) always sets true HOT 7
- DocumentFragment support HOT 5
- Create function loses content HOT 2
- [Performance Advice] Patching to single element or custom elements HOT 16
- Runnable in jsdom (server side rendering)
- Add a module build HOT 2
- Twing implementation HOT 6
- Relationship to Lit / Polymer? HOT 5
- Do not publish ts sources to npm HOT 4
- CDN version not up to date. HOT 2
- Test not launching on macOS 11.2 / Chrome 89
- Details disclosure element <details> adds and removes "open" attribute outside of incrementalDOM HOT 2
- [Performance Advice] `key` parameter for `text()` function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from incremental-dom.