Event handlers and frameworks
Tags: javascript, tutorial, reactive, rjsf
Published: 2022-09-06 15:56:42

---
title: Event handlers and frameworks
published: true
description: In this installment I give an example of how to handle event handlers
tags: javascript, tutorial, reactive, rjsf
series: DIY reactive framework
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eble812kv34qoah8l1k.png
# Use a ratio of 100:42 for best results.
---

In the [previous entry](/mellen/reactivity-1h2e) 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.

``` javascript
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:

```html
<div id="app">
  <p data-model="message"></p>
  <button onclick="changeMessage">Make a change</button>
</div>
```

``` javascript
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](https://mellen.github.io/rjsf/examples/index.html) 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!