Add Event delegation to Elements and groups of elements.

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

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 part of $LIBRARYNAME;
 
 class _ChildrenElementList extends ListBase<Element> {
   // Raw Element.
   final Element _element;
   final HtmlCollection _childElements;
@@ skipping 226 matching lines @@
    * border + margin box in this list.
    *
    * This returns a rectangle with the dimenions actually available for content
    * in this element, in pixels, regardless of this element's box-sizing
    * property. Unlike [getBoundingClientRect], the dimensions of this rectangle
    * will return the same numerical height if the element is hidden or not. This
    * can be used to retrieve jQuery's `outerHeight` value for an element.
    */
   @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
 // a better option given that we cannot quite force NodeList to be an
 // ElementList as there are valid cases where a NodeList JavaScript object
 // contains Node objects that are not Elements.
 class _FrozenElementList<T extends Element> extends ListBase<T> implements ElementList {
   final List<Node> _nodeList;
   // The subset of _nodeList that are Elements.
   List<Element> _elementList;
@@ skipping 33 matching lines @@
     _elementList.forEach((e) => e.classes = value);
   }
 
   CssRect get contentEdge => new _ContentCssListRect(_elementList);
 
   CssRect get paddingEdge => _elementList.first.paddingEdge;
 
   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);
 }
 
 /**
  * An abstract class, which all HTML elements extend.
  */
 $(ANNOTATIONS)abstract class $CLASSNAME$EXTENDS$IMPLEMENTS$NATIVESPEC {
 
   /**
    * Creates an HTML element from a valid fragment of HTML.
    *
@@ skipping 558 matching lines @@
       case 'afterend':
         this.parentNode.insertBefore(node, this.nextNode);
         break;
       default:
         throw new ArgumentError("Invalid position ${where}");
     }
   }
 
   /**
    * 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
 
 $if DART2JS
   @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 $endif
   Element _templateInstanceRef;
 
   // Note: only used if `this is! TemplateElement`
@@ skipping 395 matching lines @@
   const ScrollAlignment._internal(this._value);
   toString() => 'ScrollAlignment.$_value';
 
   /// Attempt to align the element to the top of the scrollable area.
   static const TOP = const ScrollAlignment._internal('TOP');
   /// Attempt to center the element in the scrollable area.
   static const CENTER = const ScrollAlignment._internal('CENTER');
   /// Attempt to align the element to the bottom of the scrollable area.
   static const BOTTOM = const ScrollAlignment._internal('BOTTOM');
 }