Allow on-* event handlers on <sky-element>.

sky/framework/sky-button/sky-button.sky

Index: sky/framework/sky-button/sky-button.sky
diff --git a/sky/framework/sky-button/sky-button.sky b/sky/framework/sky-button/sky-button.sky
index 3ba1e5ded81f775d0cfd0d2a0cc33da5578bb18a..47170e2f9b75b8f64e11d742385b15dfce653182 100644
--- a/sky/framework/sky-button/sky-button.sky
+++ b/sky/framework/sky-button/sky-button.sky
@@ -5,7 +5,12 @@
 -->
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
 
-<sky-element name="sky-button" attributes="highlight:boolean">
+<sky-element
+    name="sky-button"
+    attributes="highlight:boolean"
+    on-mousedown="handleMouseDown"
+    on-mouseup="handleMouseUp"
+    on-mouseout="handleMouseOut">
 <template>
   <style>
     :host {
@@ -26,17 +31,18 @@
 <script>
 module.exports = class extends SkyElement {
   created() {
-    this.tabIndex = 0; // Make focusable.
+    super.created();
 
-    this.addEventListener('mousedown', function() {
-      this.highlight = true;
-    });
-    this.addEventListener('mouseup', function() {
-      this.highlight = false;
-    });
-    this.addEventListener('mouseout', function() {
-      this.highlight = false;
-    });
+    this.tabIndex = 0; // Make focusable.
+  }
+  handleMouseDown() {
+    this.highlight = true;
+  }
+  handleMouseUp() {
+    this.highlight = false;
+  }
+  handleMouseOut() {
+    this.highlight = false;
   }
 }.register();
 </script>