caridy/event-binder-markup.html

## event-binder-markup.html
<!DOCTYPE html>
<html>
<head>
  <title>fast page</title>
  <link rel="stylesheet" type="text/css" href='http://company.cdn.com/combo?
    1.2/rollout/app.css'>
</head>
<body class="yui3-skin-sam">
  <script>
     YUI_config = {
       eventbinder: { /* binder configuration */ },
       app: {tabview: '#demo'}
     };
     YUI_config.eventbinder.listenFor('click');
  </script>

  <p> ~20k of HTML content in here... </p>

  <script src="http://company.cdn.com/combo?
    1.2/rollout/app.js"></script>
</body>
</html>

## gistfile2.js
YUI().use('event', function(Y) {

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

        // do your magic here

        e.halt(); // stop it

    }, '#demo');

});

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

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

        // do your magic here

        e.halt(); // stop it

    }, '#demo');

    // flush early interactions
    Y.EventBinder.flush('click');

});

## gistfile4.js
YUI_config = {
    eventbinder: {
        // Event handler to store events that you want to redispatch.
        fn: function(e) {
            // Event Binder Magic goes here!
        },
        // interface to listen for specific events
        listenFor: function(type) {
            var d = document;
            // Before YUI loads, we have to deal with browser inconsistencies
            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');

## gistfile5.html
<!doctype html>
<html>
<head>
<title>Using Event Binder</title>
<script type="text/javascript">
YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',

    // 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 class="yui3-skin-sam">

    <div id="doc">

      <h1>Using Gallery Event Binder: Catching early actions</h1>

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

    </div>

<!-- YUI 3 Seed //-->
<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<!-- Initialization process //-->
<script type="text/javascript">
YUI().use('event', 'gallery-event-binder', function(Y) {

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

        // do your magic here

        e.halt(); // stop it

    }, '#demo');

    // flush early interactions
    Y.EventBinder.flush('click');

});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>fast page</title>
	<link rel="stylesheet" type="text/css" href='http://company.cdn.com/combo?
	1.2/rollout/app.css'>
	</head>
	<body class="yui3-skin-sam">
	<script>
	YUI_config = {
	eventbinder: { /* binder configuration */ },
	app: {tabview: '#demo'}
	};
	YUI_config.eventbinder.listenFor('click');
	</script>

	<p> ~20k of HTML content in here... </p>

	<script src="http://company.cdn.com/combo?
	1.2/rollout/app.js"></script>
	</body>
	</html>
	YUI().use('event', function(Y) {

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

	// do your magic here

	e.halt(); // stop it

	}, '#demo');

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

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

	// do your magic here

	e.halt(); // stop it

	}, '#demo');

	// flush early interactions
	Y.EventBinder.flush('click');

	});
	YUI_config = {
	eventbinder: {
	// Event handler to store events that you want to redispatch.
	fn: function(e) {
	// Event Binder Magic goes here!
	},
	// interface to listen for specific events
	listenFor: function(type) {
	var d = document;
	// Before YUI loads, we have to deal with browser inconsistencies
	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');