add mouse events demo

demos/mouse/js/mouse.js

@@ -0,0 +1,56 @@
+$(function() {
+    var $target = Ox.Element()
+            .css({
+                position: 'absolute',
+                width: '256px',
+                top: 0,
+                bottom: 0,
+                background: 'rgb(255, 0, 0)'
+            })
+            .html('Click here')
+            .appendTo(Ox.UI.$body),
+        $clear = Ox.Element()
+            .css({
+                position: 'absolute',
+                left: '256px',
+                right: 0,
+                height: '16px',
+                background: 'rgb(192, 192, 192)'
+            })
+            .html('Clear log')
+            .click(function() {
+                $log.empty();
+            })
+            .appendTo(Ox.UI.$body);
+        $log = Ox.Element()
+            .css({
+                position: 'absolute',
+                left: '256px',
+                right: 0,
+                top: '16px',
+                bottom: 0,
+                overflowY: 'auto'
+            })
+            .appendTo(Ox.UI.$body);
+    [
+        'anyclick', 'singleclick', 'doubleclick', 'mouserepeat',
+        'dragstart', 'drag', 'dragpause', 'dragend'
+    ].forEach(function(event) {
+        $target.bindEvent(event, function(foo, e) {
+            var date = new Date();
+            $('<div>')
+                .html(
+                    Ox.formatDate(date, '%H:%M:%S') + '.' + (Ox.pad(date % 1000, 3)) +
+                    ' <span style="font-weight: bold">' + event + '</span> ' +
+                    JSON.stringify(Ox.extend(e.clientX ? {
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                    } : {}, e.clientDX ? {
+                        clientDX: e.clientDX,
+                        clientDY: e.clientDY
+                    } : {}))
+                )
+                .prependTo($log.$element);
+        });
+    });
+});