Gesture-events delegated

All gesture-events are subscribed using delegation. Even if you are listening to one node by id-reference. Advantage of this approach is that you can setup the listeners without the need to worry whether the nodes are in the DOM. This examples shows how subscribers of a specific node as well as multiple nodes by a selector are set up. The subscribers are setup before the nodes are in the DOM.

Tap on the Add-button to add some extra buttons. Tap on those extra buttons to show a pop-up.

Code-example:

<body>
    <div id="addbtn-container"></div>
    <div id="container"></div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var count, container, addNewButton, showButtonText;

    count = 0;
    container = document.getElementById('container');

    addNewButton = function(e) {
        var button = document.createElement('button');
        count++;
        button.className = 'pure-button pure-button-primary pure-button-bordered';
        button.innerHTML = 'Tap me '+count;
        container.appendChild(button);
    };

    showButtonText = function(e) {
        alert(e.target.innerHTML);
    };

    ITSA.Event.after('tap', addNewButton, '#addbtn');
    ITSA.Event.after('tap', showButtonText, '#container button');

    setTimeout(function() {
        var button = document.createElement('button');
        button.id = 'addbtn';
        button.className = 'pure-button pure-button-primary pure-button-bordered';
        button.innerHTML = 'Add button';
        document.getElementById('addbtn-container').appendChild(button);
    }, 500);
</script>

API Docs

Examples

Module-documentation

Gesture-events delegated