Add Event delegation to Elements and groups of elements.

tools/dom/templates/html/impl/impl_Element.darttemplate

Index: tools/dom/templates/html/impl/impl_Element.darttemplate
diff --git a/tools/dom/templates/html/impl/impl_Element.darttemplate b/tools/dom/templates/html/impl/impl_Element.darttemplate
index 99a9b37226cec0281f8bce4c688e28ff0202c5b4..a3e71775d6bbedeba632127f1a5496df6e5cc35a 100644
--- a/tools/dom/templates/html/impl/impl_Element.darttemplate
+++ b/tools/dom/templates/html/impl/impl_Element.darttemplate
@@ -244,6 +244,107 @@ abstract class ElementList<T extends Element> extends ListBase<T> {
    */
   @Experimental()
   CssRect get marginEdge;
+
+  @DomName('Element.onabort')
+  ElementStream<Event> get onAbort;
+  @DomName('Element.onbeforecopy')

[blois, 2013/08/08 00:12:11]

Is it necessary to do all events? I'm worried about this list getting out of
date- if we want all, is there some way we can keep it in sync with Element?

[Emily Fortuna, 2013/08/09 00:22:06]

Now with autogeneration!

+  ElementStream<Event> get onBeforeCopy;
+  @DomName('Element.onbeforecut')
+  ElementStream<Event> get onBeforeCut;
+  @DomName('Element.onbeforepaste')
+  ElementStream<Event> get onBeforePaste;
+  @DomName('Element.onblur')
+  ElementStream<Event> get onBlur;
+  @DomName('Element.onchange')
+  ElementStream<Event> get onChange;
+  @DomName('Element.onclick')
+  ElementStream<MouseEvent> get onClick;
+  @DomName('Element.oncontextmenu')
+  ElementStream<MouseEvent> get onContextMenu;
+  @DomName('Element.oncopy')
+  ElementStream<Event> get onCopy;
+  @DomName('Element.oncut')
+  ElementStream<Event> get onCut;
+  @DomName('Element.ondblclick')
+  ElementStream<Event> get onDoubleClick;
+  @DomName('Element.ondrag')
+  ElementStream<MouseEvent> get onDrag;
+  @DomName('Element.ondragend')
+  ElementStream<MouseEvent> get onDragEnd;
+  @DomName('Element.ondragenter')
+  ElementStream<MouseEvent> get onDragEnter;
+  @DomName('Element.ondragleave')
+  ElementStream<MouseEvent> get onDragLeave;
+  @DomName('Element.ondragover')
+  ElementStream<MouseEvent> get onDragOver;
+  @DomName('Element.ondragstart')
+  ElementStream<MouseEvent> get onDragStart;
+  @DomName('Element.ondrop')
+  ElementStream<MouseEvent> get onDrop;
+  @DomName('Element.onerror')
+  ElementStream<Event> get onError;
+  @DomName('Element.onfocus')
+  ElementStream<Event> get onFocus;
+  @DomName('Element.oninput')
+  ElementStream<Event> get onInput;
+  @DomName('Element.oninvalid')
+  ElementStream<Event> get onInvalid;
+  @DomName('Element.onkeydown')
+  ElementStream<KeyboardEvent> get onKeyDown;
+  @DomName('Element.onkeypress')
+  ElementStream<KeyboardEvent> get onKeyPress;
+  @DomName('Element.onkeyup')
+  ElementStream<KeyboardEvent> get onKeyUp;
+  @DomName('Element.onload')
+  ElementStream<Event> get onLoad;
+  @DomName('Element.onmousedown')
+  ElementStream<MouseEvent> get onMouseDown;
+  @DomName('Element.onmousemove')
+  ElementStream<MouseEvent> get onMouseMove;
+  @DomName('Element.onmouseout')
+  ElementStream<MouseEvent> get onMouseOut;
+  @DomName('Element.onmouseover')
+  ElementStream<MouseEvent> get onMouseOver;
+  @DomName('Element.onmouseup')
+  ElementStream<MouseEvent> get onMouseUp;
+  @DomName('Element.onmousewheel')
+  ElementStream<WheelEvent> get onMouseWheel;
+  @DomName('Element.onpaste')
+  ElementStream<Event> get onPaste;
+  @DomName('Element.onreset')
+  ElementStream<Event> get onReset;
+  @DomName('Element.onscroll')
+  ElementStream<Event> get onScroll;
+  @DomName('Element.onsearch')
+  ElementStream<Event> get onSearch;
+  @DomName('Element.onselect')
+  ElementStream<Event> get onSelect;
+  @DomName('Element.onselectstart')
+  ElementStream<Event> get onSelectStart;
+  @DomName('Element.onsubmit')
+  ElementStream<Event> get onSubmit;
+  @DomName('Element.ontouchcancel')
+  ElementStream<TouchEvent> get onTouchCancel;
+  @DomName('Element.ontouchend')
+  ElementStream<TouchEvent> get onTouchEnd;
+  @DomName('Element.ontouchenter')
+  ElementStream<TouchEvent> get onTouchEnter;
+  @DomName('Element.ontouchleave')
+  ElementStream<TouchEvent> get onTouchLeave;
+  @DomName('Element.ontouchmove')
+  ElementStream<TouchEvent> get onTouchMove;
+  @DomName('Element.ontouchl')
+  ElementStream<TouchEvent> get onTouchStart;
+  @DomName('Element.ontransitionend')
+  @SupportedBrowser(SupportedBrowser.CHROME)
+  @SupportedBrowser(SupportedBrowser.FIREFOX)
+  @SupportedBrowser(SupportedBrowser.IE, '10')
+  @SupportedBrowser(SupportedBrowser.SAFARI)
+  ElementStream<TransitionEvent> get onTransitionEnd;
+  @DomName('Element.onwebkitfullscreenchange')
+  ElementStream<Event> get onFullscreenChange;
+  @DomName('Element.onwebkitfullscreenerror')
+  ElementStream<Event> get onFullscreenError;
 }
 
 // TODO(jacobr): this is an inefficient implementation but it is hard to see
@@ -297,6 +398,103 @@ class _FrozenElementList<T extends Element> extends ListBase<T> implements Eleme
   CssRect get borderEdge => _elementList.first.borderEdge;
 
   CssRect get marginEdge => _elementList.first.marginEdge;
+
+  ElementStream<Event> get onAbort => 
+      Element.abortEvent._forElementTargetList(this);
+  ElementStream<Event> get onBeforeCopy => 
+      Element.beforeCopyEvent._forElementTargetList(this);
+  ElementStream<Event> get onBeforeCut => 
+      Element.beforeCutEvent._forElementTargetList(this);
+  ElementStream<Event> get onBeforePaste => 
+      Element.beforePasteEvent._forElementTargetList(this);
+  ElementStream<Event> get onBlur => 
+      Element.blurEvent._forElementTargetList(this);
+  ElementStream<Event> get onChange => 
+      Element.changeEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onClick => 
+      Element.clickEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onContextMenu => 
+      Element.contextMenuEvent._forElementTargetList(this);
+  ElementStream<Event> get onCopy => 
+      Element.copyEvent._forElementTargetList(this);
+  ElementStream<Event> get onCut => 
+      Element.cutEvent._forElementTargetList(this);
+  ElementStream<Event> get onDoubleClick => 
+      Element.doubleClickEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDrag => 
+      Element.dragEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDragEnd => 
+      Element.dragEndEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDragEnter => 
+      Element.dragEnterEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDragLeave => 
+      Element.dragLeaveEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDragOver => 
+      Element.dragOverEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDragStart => 
+      Element.dragStartEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onDrop => 
+      Element.dropEvent._forElementTargetList(this);
+  ElementStream<Event> get onError => 
+      Element.errorEvent._forElementTargetList(this);
+  ElementStream<Event> get onFocus => 
+      Element.focusEvent._forElementTargetList(this);
+  ElementStream<Event> get onInput => 
+      Element.inputEvent._forElementTargetList(this);
+  ElementStream<Event> get onInvalid => 
+      Element.invalidEvent._forElementTargetList(this);
+  ElementStream<KeyboardEvent> get onKeyDown => 
+      Element.keyDownEvent._forElementTargetList(this);
+  ElementStream<KeyboardEvent> get onKeyPress => 
+      Element.keyPressEvent._forElementTargetList(this);
+  ElementStream<KeyboardEvent> get onKeyUp => 
+      Element.keyUpEvent._forElementTargetList(this);
+  ElementStream<Event> get onLoad => 
+      Element.loadEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onMouseDown => 
+      Element.mouseDownEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onMouseMove => 
+      Element.mouseMoveEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onMouseOut => 
+      Element.mouseOutEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onMouseOver => 
+      Element.mouseOverEvent._forElementTargetList(this);
+  ElementStream<MouseEvent> get onMouseUp => 
+      Element.mouseUpEvent._forElementTargetList(this);
+  ElementStream<WheelEvent> get onMouseWheel =>
+      Element.mouseWheelEvent._forElementTargetList(this);
+  ElementStream<Event> get onPaste => 
+      Element.pasteEvent._forElementTargetList(this);
+  ElementStream<Event> get onReset => 
+      Element.resetEvent._forElementTargetList(this);
+  ElementStream<Event> get onScroll => 
+      Element.scrollEvent._forElementTargetList(this);
+  ElementStream<Event> get onSearch => 
+      Element.searchEvent._forElementTargetList(this);
+  ElementStream<Event> get onSelect => 
+      Element.selectEvent._forElementTargetList(this);
+  ElementStream<Event> get onSelectStart =>
+      Element.selectStartEvent._forElementTargetList(this);
+  ElementStream<Event> get onSubmit =>
+      Element.submitEvent._forElementTargetList(this);
+  ElementStream<TouchEvent> get onTouchCancel =>
+      Element.touchCancelEvent._forElementTargetList(this);
+  ElementStream<TouchEvent> get onTouchEnd =>
+      Element.touchEndEvent._forElementTargetList(this);
+  ElementStream<TouchEvent> get onTouchEnter =>
+      Element.touchEnterEvent._forElementTargetList(this);
+  ElementStream<TouchEvent> get onTouchLeave =>
+      Element.touchLeaveEvent._forElementTargetList(this);
+  ElementStream<TouchEvent> get onTouchMove =>
+      Element.touchMoveEvent._forElementTargetList(this);
+  ElementStream<TouchEvent> get onTouchStart =>
+      Element.touchStartEvent._forElementTargetList(this);
+  ElementStream<TransitionEvent> get onTransitionEnd =>
+      Element.transitionEndEvent._forElementTargetList(this);
+  ElementStream<Event> get onFullscreenChange =>
+      Element.fullscreenChangeEvent._forElementTargetList(this);
+  ElementStream<Event> get onFullscreenError =>
+      Element.fullscreenErrorEvent._forElementTargetList(this);
 }
 
 /**
@@ -875,19 +1073,31 @@ $if DART2JS
 
   /**
    * Checks if this element matches the CSS selectors.
+   *
+   * If `includeAncestors` is true, we examine all of this element's parent
+   * elements and also return true if any of its parent elements matches
+   * `selectors`.
    */
   @Experimental()
-  bool matches(String selectors) {
-    if (JS('bool', '!!#.matches', this)) {
-      return JS('bool', '#.matches(#)', this, selectors);
-    } else if (JS('bool', '!!#.webkitMatchesSelector', this)) {
-      return JS('bool', '#.webkitMatchesSelector(#)', this, selectors);
-    } else if (JS('bool', '!!#.mozMatchesSelector', this)) {
-      return JS('bool', '#.mozMatchesSelector(#)', this, selectors);
-    } else if (JS('bool', '!!#.msMatchesSelector', this)) {
-      return JS('bool', '#.msMatchesSelector(#)', this, selectors);
-    }
-    throw new UnsupportedError("Not supported on this platform");
+  bool matches(String selectors, [includeAncestors = false]) {

[blois, 2013/08/08 00:12:11]

This API should become an inlined native API, I'm a bit hesitant to add the
includeAncestors to this.

[Emily Fortuna, 2013/08/09 00:22:06]

Where is there information about it becoming an inlined native API? 

W3C doesn't mention it anywhere; nowhere on the web can I find info about
"includeAncestors" with respect to the matchesSelector. 

+    var elem = this;
+    do {
+      bool matches = false;
+      if (JS('bool', '!!#.matches', elem)) {
+        matches = JS('bool', '#.matches(#)', elem, selectors);
+      } else if (JS('bool', '!!#.webkitMatchesSelector', elem)) {
+        matches = JS('bool', '#.webkitMatchesSelector(#)', elem, selectors);
+      } else if (JS('bool', '!!#.mozMatchesSelector', elem)) {
+        matches = JS('bool', '#.mozMatchesSelector(#)', elem, selectors);
+      } else if (JS('bool', '!!#.msMatchesSelector', elem)) {
+        matches = JS('bool', '#.msMatchesSelector(#)', elem, selectors);
+      } else {
+        throw new UnsupportedError("Not supported on this platform");
+      }
+      if (matches) return true;
+      elem = elem.parent;
+    } while(includeAncestors && elem != null);
+    return false;
   }
 $else
 $endif