SO Answer / Calling Javascript Functions by name

See also: http://stackoverflow.com/questions/12053838/calling-javascript-functions-by-name/

by KooiInc MeHere

HTML

<div data-function="click" data-param="1">Click1</div>
<div data-function="click" data-param="2">Click2</div>
<div data-function="click" data-param="3">Click3</div>
<div data-function="click" data-param="4">Click3</div>

<div data-function="clickDelegate">
    <span data-dfunction="deleg">delegate1</span>
    <span data-dfunction="deleg">delegate2</span>
</div>

CSS

body {font: 0.8em normal verdana, arial}
.red {color:red; font-weight: bold;}
div,span {cursor:pointer;}

JavaScript

var MYSPACE = (function(){
 
 var handlers = {
     click: function(e){
        this.original = this.original || this.innerHTML;
        //call private [inout]
        inout(this, 'Clicked! div '+ $(this).attr('data-param'), this.original);
     },
     clickDelegate: function(e){
        var src = e.target || e.srcElement; 
        return handlers[$(src).attr('data-dfunction')](src); 
     },
     deleg: function(el){
         el.original = el.original || el.innerHTML;
         //call private [inout]
         inout(el,'<span class="red">'+el.original+' clicked!</span>',el.original);
     }
 };
 $('[data-function]').each(function()  {
       var fName = $(this).attr('data-function');
       $(this).on('click',handlers[fName]);
  });
    
 function inout(el,html1,html2){
     $(el).fadeOut('slow',
                   function(){$(this).html(html1).fadeIn('slow');});
     setTimeout(
        function(){
          $(el).fadeOut('slow',
                         function(){$(this).html(html2).fadeIn('slow');});}
        ,2000);
 }      
 return {alldone: 'MYSPACE done'}   
}());