sandbox/event/delegate.html

	delegate.html revision d408aa66c7199d6b6a133c20c2116414dc70fa0a
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">
<head>
<title>YUI 3.0</title>
<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
<script type="text/javascript" src="/build/oop/oop-debug.js"></script>
<script type="text/javascript" src="/build/event-custom/event-custom.js"></script>
<script type="text/javascript" src="/build/event/event-debug.js"></script>
<script type="text/javascript" src="/build/event-simulate/event-simulate.js"></script>
<script type="text/javascript" src="/build/dom/dom.js"></script>
<script type="text/javascript" src="/build/node/node-debug.js"></script>
<script type="text/javascript" src="/build/dump/dump.js"></script>
<script type="text/javascript" src="/build/substitute/substitute.js"></script>

<body>

<style>
    li.clickable {
        background-color: #eee;
        cursor: hand;
    }
</style>


<script>

if (typeof loadFirebugConsole == 'function') {
    loadFirebugConsole();
}

YUI({

    base: '/build/'

}).use('node', 'dump', 'substitute', function(Y) {

    var handle =

        Y.on('delegate',

         function(e) {
            Y.log(e.type + ": " + e.target.get('innerHTML') + ' -- ' + arguments[1]);
         },

         '#ul1',

         'click',

         'li.clickable',

         Y,

         'firstone',

         2);

    var handle4 =

        Y.on('delegate',

         function(e) {
            Y.log(e.type + ": " + e.target.get('innerHTML') + ' SECOND -- ' + arguments[1]);
         },

         '#ul1',

         'click',

         'li',

         Y,

         'firstone',

         2);

    var handle2 =

        Y.on('delegate',

         function(e) {
            Y.log(e.type + ": " + e.target.get('innerHTML') + ' -- ' + arguments[1]);
         },

         '#ul1',

         'click',

         'li.clickable',

         Y,

         'secondone',

         2);

    var handle3 =

        Y.on('delegate',

         function(e) {
            Y.log(e.type + ": " + e.target.get('innerHTML') + ' -- ' + arguments[1]);
         },

         '#ul1',

         'click',

         'li.clickable',

         Y,

         'thirdone',

         2);


    handle2.detach();
});

</script>

<ul id="ul1">
    <li id="li1">li1 - 1</li>
    <li id="li2" class="clickable">li2 - 1</li>
    <li id="li3">li3 - 1</li>
    <li id="li4" class="clickable">li4 - 1</li>
</ul>

<ul id="ul2">
    <li>li1 - 2</li>
    <li class="clickable">li2 - 2</li>
    <li>li3 - 2</li>
    <li class="clickable">li4 - 2</li>
</ul>

</body>
</html>