Accept array of functions for event handlers
See original GitHub issueAt my company, we’ve been using maquette a lot for a new project of ours and one thing that I keep running into and thinking “wow it would be nice if maquette did this” is optionally accepting an array of handlers for any event.
Consider the toy script below
document.addEventListener("DOMContentLoaded", function () {
const h = maquette.h,
domNode = document.body,
projector = maquette.createProjector(),
store = {},
calculateWidth = (element) => {
store.width = `${element.getBoundingClientRect().width}px`;
projector.scheduleRender();
},
storeElement = (element) => {
store.element = element;
},
storeElementAndCalculateWidth = (element) => {
storeElement(element);
calculateWidth(element);
};
const renderMaquette = () => {
return h("div", [
h("div",
{
class: "my-div",
styles: {
width: `${store.width}`,
},
},
[
"Div",
]
),
h("input",
{
afterCreate: storeElementAndCalculateWidth,
}
),
]);
};
projector.append(domNode, renderMaquette);
});
I would like to remove the need for functions like storeElementAndCalculateWidth
. I propose one of two solutions.
- accepting arrays into
afterCreate
,onclick
,onkeypress
, etc.
i.e.
h("input",
{
afterCreate: [storeElement, calculateWidth],
}
)
- Accepting arrays into plural versions of all existing event handlers:
afterCreates
,onclicks
,onkeypresses
, etc.
h("input",
{
afterCreates: [storeElement, calculateWidth],
}
)
If you find this to be a good idea, there’s a good chance I could make this change and submit a pull request for it.
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Filling array on event and access it outside the event function ...
This is what I tried so far, but I just can't figure how to access the array outside the event handler function. Here's...
Read more >Writing Event Handlers :: COM and DDE Support ... - MatLab
When writing an event handler function, use the Event Name argument to identify the source of the event. Get the arguments passed by...
Read more >Event handling (overview) - Event reference - MDN Web Docs
The most flexible way to set an event handler on an element is to use the EventTarget.addEventListener method. This approach allows multiple ......
Read more >MATLAB eventlisteners - MathWorks
This MATLAB function lists the events and their event handler routines registered ... has no registered events, eventlisteners returns an empty cell array....
Read more >React onClick Event Handling (With Examples) - Upmostly
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The algorithm for event handlers in maquette3 is as follows:
That’s really awesome. Thanks for the help and the explanation, it’s interesting stuff.