Executing javascript function, which name is stored in variable?

The function reference is just a property on the object. In JavaScript, you can access object properties in two ways:

1. Using dotted notation and a literal property name: obj.foo

2. Using bracketed notation and a string property name: obj["foo"]

In the latter case, the string can be the result of any expression.

Once you've accessed the property, you just add () to call it.

So:

evtsheet['it3L']();

or

evtsheet.it3L();

With either of those, within the call, this will be evtsheet.

You said

I could able to access this value and store in a variable.

You can do that, like this:

var f = evtsheet['it3L'];

or

var f = evtsheet.it3L;

and then call it:

f();

but note that if you do that, this will not be evtsheet within the call. (It will be the global object or undefined, depending on whether you're in strict mode.)

More:

• Mythical methods
• You must remember this

Re getting the names from the HTML. I would change them to look like this so they're easier to grab (they're not hard the way you have it, but they're easier like this):

<div id="it3" evt="swipeleft|swiperight" act="evtsheet.it2L|evtsheet.it3R" class="focusable off" style="width: 25%; height: 26.031746031746035%; top: 60.63492063492063%; left: 44.82142857142858%; z-index: 998; "></div>
<div id="it4" evt="swipeleft|swiperight" act="evtsheet.it3L|evtsheet.it4R" class="focusable off" style="width: 25%; height: 25.709325396825395%; top: 60.952380952380956%; left: 60.357142857142854%; z-index: 999; ></div>

So then you can use split to get the parts of it:

com.xxx.init = function(ele) {       //ele = "#it3"

     var e = $(ele).attr("act").split("|");

     // This assumes `evtsheet` is a global variable
     // Here's how to call the function defined by `e[0]`:
     var parts = e[0].split('.');
     window[parts[0]][parts[1]]();

     // (And you can generalize it for any of the other functions in
     // the `e` array)
}

That assumes evtsheet is a global variable (which it is in your question). I don't like global variables, so I'd probably put all of the code in a scoping function (to avoid creating globals) and do this:

<script>
    // Start the scoping function
    (function() {
        // Make evtsheet a property of an object
        var stuff = {
            evtsheet: {
                it2L : function(){/*some code*/},
                it3L : function(){/*some code*/},
                it3R : function(){/*some code*/},
                it4L : function(){/*some code*/},
               /*have more similar functions*/
            }
        };

        // ...other stuff...

        com.xxx.init = function(ele) {       //ele = "#it3"

             var e = $(ele).attr("act").split("|");

             // We no longer assume `evtsheet` is a global, but it *is*
             // a property on `stuff`.
             // Here's how to call the function defined by `e[0]`:
             var parts = e[0].split('.');
             stuff[parts[0]][parts[1]]();

             // (And you can generalize it for any of the other functions in
             // the `e` array)
        };


        // ...other stuff...

    // End of scoping function
    })();
</script>

If you want to keep the names the same as they are, it's a fairly simple regex instead:

var parts = /^([^[]+)['([^']+)']$/.exec(e[0]);
if (parts) {
    stuff[parts[1]][parts[2]](); // Note the indexes changed
}

You can call your function in the following way

<script>
    var evtsheet = {
        it3L : function() {
            console.log("test")
        }

    }
    evtsheet['it3L']();        
    // evtsheet.it3L();
</script>

Try putting the name of the function instead:

//assuming that you are going to get the "act" property and parse it
<div id="it3" act="it3L|it4R"...

//get the function name, for example, it3L
var evt = 'it3L';

//execute that function from your evtsheet object
evtsheet[evt].call(this);

You are looking for events. Events are a way to call functions when something happens. Now, you did not specify when do you want to call those functions, let's take one of the most common for example: onClick.

<div id="it3" evt="swipeleft|swiperight" onclick="funcName()" ...></div>

And the script

<script>
    function funcName() {
        // Anything goes...
    }
</script>

Also, if you want to store metainformation in html tags, I suggest you to use the standard data- attributes, see here: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#custom-data-attribute