Event handlers and frameworks
Matt Ellen-Tsivintzeli
Posted on September 6, 2022
In the previous entry I built the foundations for the framework I'm making, and showed how I could use the framework to insert text without having to directly manipulate an element's innerHTML
or textContent
.
This time I'll be binding functions to events.
A function bound to an event is an event handler. One function can be bound to many events and one event can be bound to many functions. An event can be all sorts of things. Most often, in javascript, it's some sort of user interaction, e.g. clicking the mouse on a button.
That's what I'll show in this post. How to use the framework to bind a function to the click
event of a button.
So the first thing I need to do is to extend the framework to bind functions to click
events.
In the previous post the initialisation function of the framework looped through all the elements, so that's where we'll start.
for(let el of elements)
{
/*
* previous work of binding values to elements goes here.
*/
if(el.getAttribute('onclick'))
{
let onclick = el.getAttribute('onclick');
if(onclick in _internal.originalViewmodel.functions)
{
el.addEventListener('click', _internal.originalViewmodel.functions[onclick].bind(_internal));
el.setAttribute('onclick', '');
}
}
}
What this means is that if you set the onclick
attribute of an element within the framework, e.g. <button onclick="clickhandler">click me!</button>
and there is a function called clickhandler
in the viewmodel, then it will be assigned as a click
handler for the button.
After setting the click
handler, the onclick
attribute is cleared, so that an error does not occur when a non-existant handler is attempted to be called.
This is a worked example of the html and viewmodel:
<div id="app">
<p data-model="message"></p>
<button onclick="changeMessage">Make a change</button>
</div>
import {rjsf} from 'rjsf.js'
(function()
{
const appElement = document.getElementById('app');
const app = new rjsf(appElement);
const viewmodel =
{
functions:
{
changeMessage: function(e)
{
e.preventDefault();
const v = this;
v.data.message = 'Now this message is.';
setTimeout(() => v.data.message = 'This message is here.', 1000);
}
},
data:
{
message: 'This message is here.',
}
};
app.init(viewmodel);
})();
The click
handler here will change the message of the p
element and then, after a delay of 1 second, change it back.
Next time I will investigate how to make elements conditional.
I've started adding code examples to the github pages for the repo. Yet another way to see how this project is going!
Please let me know any thoughts or questions you have in the comments below.
ā¤ļø, š¦, share, and follow for the next instalment!
Posted on September 6, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.