Monday, 22 April 2013

Binding functions to HTML elements using HTML5 data- attributes

Project : https://github.com/IrishAdo/EventManager

Introduction

This project came about from my need to simply link a html element to a javascript function.  I started out by adding click events to each element that I wanted to be able to click.  That quickly became very complex to manage the code as the web application became bigger.

What I wanted was to create a javascript object structure where I could group functionality into parts of the object with each section being a different file so that I was effectively splitting the code base into manageable code blocks  take for example the following example object


<script>
var myObject = {
    subObject = {
        YouClickedSomething(t){
            alert(t.id);
        },
        withParams(t,hello){
            alert("hello "+ hello);
        },
        withExtraParams(t,hello,with){
            alert("hello " + hello + ' hows ' + with);
        }
    }
};
</script>

As you can see this is a rather simple object structure now in my code base I would have a main.js which would be.
var myObject = {
    subObject = {}
};

Then with a subObject.js file containing loaded afterwards.
myObject.subObject = {
        YouClickedSomething(t){
            alert(t.id);
        },
        withParams(t,hello){
            alert("hello "+ hello);
        },
        withExtraParams(t,hello,with){
            alert("hello " + hello + ' hows ' + with);
        }
    };

Now I have three functions in the sub object that I want different events to interact with which and here is the elements in questions.
<button id='button1'>button 1</button>
<input id='field1' value='input 1'/>
<button id='button2'>button 2</button>
<button id='button3'>button 3</button>

This would normally require the developer to write a bit of binding code that links each of the elements to specific functions.  Which means for the developer to maintain the code there is no reference between the elements and the javascript out side the Element Selector used to bind the element to an event.  so what if we changed the text above to the following

<button id='button1' 
       data-click="myObject.subObject.YouClickedSomething"
>button 1</button>
<input id='field1'   
       data-click="myObject.subObject.YouClickedSomething" 
       value='input 1'/>
<button id='button2' 
       data-click="myObject.subObject.withParams" 
       data-argc='1' 
       data-argv1='ted!!!'
>button 2</button>
<button id='button3'
       data-click="myObject.subObject.withExtraParams"
       data-argc='2' 
       data-argv1='ted!!!' 
       data-argv2='james!!!'
>button 3</button>

As you can see the html is now telling the developer what elements are bound to an event and the data-action field is telling us what type of event is required on the element for the function to be called.  Valid values for data-action are click, hover & change.  The best bit of this type of coding is that as a developer you can see the the function that will be called on the click event of the above examples.

The zero indexed parameter of each function will contain the object that fired the event then any additional parameters you want to pass to the destination function.