caridy/event-binder-evolution-1.html

## event-binder-evolution-1.html
<!doctype html>
<html>
<head>
<title>Event Binder - Simple</title>
</head>
<body>

    <div id="doc">

      <div id="democlick">
        <p>Placeholder for <a href="http://yuilibrary.com/">click</a> listener</p>
      </div>

    </div>

<!-- YUI 3 Seed //-->
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<!-- Initialization process //-->
<script type="text/javascript">

YUI().use('node', function(Y) {

	Y.on('click', function(e) {

		// do your stuff
		e.halt();

	}, '#democlick a')

});

</script>
</body>
</html>

## event-binder-evolution-2.html
<!doctype html>
<html>
<head>
<title>Event Binder - Using a custom module</title>
</head>
<body>

    <div id="doc">

      <div id="democlick">
        <p>Placeholder for <a href="http://yuilibrary.com/">click</a> listener</p>
      </div>

    </div>

<!-- YUI 3 Seed //-->
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<!-- Initialization process //-->
<script type="text/javascript">

YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',
    modules: {
      'my-custom-module': {
        fullpath: './my-custom-module.js'
      }
    }
};

YUI().use('my-custom-module', function(Y) {

   // my custom modules set the listeners during the initialization
   Y.MyApp.init();

});

</script>
</body>
</html>
<!--
Differences with the previous code:
1- Moving Y.on to a custom module for better organization
2- Introducing YUI_config to configure the application
//-->

## event-binder-evolution-3.html
<!doctype html>
<html>
<head>
<title>Event Binder - Early Event Binding</title>
<script type="text/javascript">
YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',
    modules: {
      'my-custom-module': {
        fullpath: './my-custom-module.js'
      }
    },

    // event binder configuration starts here
    eventbinder: {
        // listener callback function
        fn: function(e) {
            var binder = YUI_config.eventbinder,
                filter = /yui3-event-binder/,
                container = (e.target || e.srcElement),
                info = {
                    target: container,
                    type : e.type
                };

            // look for an element with the class yui3-event-binder
            while (container && !filter.test(container.className)) {
                container = container.parentNode;
            }

            if (container) {
                (binder.q = binder.q || []).push(info);

                // prevent the default browser action for this event
                if (e.preventDefault) {
                    e.preventDefault();
                }
                return (e.returnValue = false);
            }
        },

        listenFor: function(type) {
            var d = document;

            if (d.addEventListener) {
                d.addEventListener(type, this.fn, false);
            } else {
                d.attachEvent('on' + type, this.fn);
            }

            return this;
        }
    }
};
// add events to the monitoring process
YUI_config.eventbinder.listenFor('click');
</script>
</head>
<body>

    <div id="doc">

      <div id="democlick" class="yui3-event-binder">
        <p>Placeholder for <a href="http://yuilibrary.com/">click</a> listener</p>
      </div>

    </div>

<!-- YUI 3 Seed //-->
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<!-- Initialization process //-->
<script type="text/javascript">

YUI().use('my-custom-module', 'gallery-event-binder', function(Y) {

   // my custom modules set the listeners during the initialization
   Y.MyApp.init();

   // flushing events
   Y.EventBinder.flush('click');

});

</script>
</body>
</html>
<!--
Differences with the previous code:
1- Moving YUI_config to the top
2- Adding event-binder property to YUI_config and initializing event-binder using "listenFor"
3- "yui3-event-binder" to the element with democlick to bind any click event within it
4- Adding 'gallery-event-binder' to the "use" statement to load the module from the gallery
5- Calling Y.EventBinder.flush('click'); at the end of the initialization to flush events
//-->

## event-binder-evolution-4.html
<!doctype html>
<html>
<head>
<title>Event Binder - Early Event Binding and Event-driven Module Loading</title>
<script type="text/javascript" src="my-yui-config.js"></script>
</head>
<body>

    <div id="doc">

      <div id="democlick" class="yui3-event-binder">
        <p>Placeholder for <a href="http://yuilibrary.com/">click</a> listener</p>
      </div>

    </div>

<!-- YUI 3 Seed //-->
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<!-- Initialization process //-->
<script type="text/javascript">

YUI().use('gallery-event-binder', function(Y) {

   // my custom modules will be loaded on demand
   Y.EventBinder.on('click', ['my-custom-module'], '#democlick a');

   // flushing events
   Y.EventBinder.flush('click');

});

</script>
</body>
</html>
<!--
Differences with the previous code:
1- Moving YUI_config into an external/cacheable file
2- Removing 'my-custom-module' from the "use" statement
3- Using "Y.EventBinder.on" to drive the loading of 'my-custom-module' after a user interaction.
//-->
	<!doctype html>
	<html>
	<head>
	<title>Event Binder - Simple</title>
	</head>
	<body>

	<div id="doc">

	<div id="democlick">
	<p>Placeholder for <a href="http://yuilibrary.com/">click</a> listener</p>
	</div>

	</div>

	<!-- YUI 3 Seed //-->
	<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
	<!-- Initialization process //-->
	<script type="text/javascript">

	YUI().use('node', function(Y) {

	Y.on('click', function(e) {

	// do your stuff
	e.halt();

	}, '#democlick a')

	});

	</script>
	</body>
	</html>