alexwright/Event Stuff

## Event Stuff
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <h1>Hi</h1>
        <div class="widget" style="padding: 2em;">
            <div class="some-menu-whatever">
                <button data-color="red" class="btn-change-color">red</button>
                <button data-color="blue" class="btn-change-color">blue</button>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

        <script>
            "use strict";
            (function () {
                function changeColor() {
                    console.log('clicked');
                    var $t = $(this),
                        color = $t.data('color')
                        event = $.Event('color-change', { color: color });
                    $(this).trigger(event);
                }
                function init() {
                    $('.btn-change-color')
                        .click(changeColor);
                }
                $(init);
            })();
        </script>

        <script>
            "use strict";
            (function () {
                $(function () {
                    $('.widget').on('color-change', function (ev) {
                        if ('color' in ev) {
                            $(this).css({ backgroundColor: ev.color });
                        }
                        console.log('change', this, arguments);
                    });
                });
            })();
        </script>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	</head>
	<body>
	<h1>Hi</h1>
	<div class="widget" style="padding: 2em;">
	<div class="some-menu-whatever">
	<button data-color="red" class="btn-change-color">red</button>
	<button data-color="blue" class="btn-change-color">blue</button>
	</div>
	</div>
	<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

	<script>
	"use strict";
	(function () {
	function changeColor() {
	console.log('clicked');
	var $t = $(this),
	color = $t.data('color')
	event = $.Event('color-change', { color: color });
	$(this).trigger(event);
	}
	function init() {
	$('.btn-change-color')
	.click(changeColor);
	}
	$(init);
	})();
	</script>

	<script>
	"use strict";
	(function () {
	$(function () {
	$('.widget').on('color-change', function (ev) {
	if ('color' in ev) {
	$(this).css({ backgroundColor: ev.color });
	}
	console.log('change', this, arguments);
	});
	});
	})();
	</script>
	</body>
	</html>