src/core/src/dom/Element.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.core.Element
  17  * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
  18  * <p>All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all DOM elements.</p>
  19  * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
  20  * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
  21  * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
  22  * Usage:<br>
  23 <pre><code>
  24 // by id
  25 var el = Ext.get("my-div");
  26
  27 // by DOM element reference
  28 var el = Ext.get(myDivElement);
  29 </code></pre>
  30  * <b>Animations</b><br />
  31  * <p>When an element is manipulated, by default there is no animation.</p>
  32  * <pre><code>
  33 var el = Ext.get("my-div");
  34
  35 // no animation
  36 el.setWidth(100);
  37  * </code></pre>
  38  * <p>Many of the functions for manipulating an element have an optional "animate" parameter.  This
  39  * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
  40  * <pre><code>
  41 // default animation
  42 el.setWidth(100, true);
  43  * </code></pre>
  44  *
  45  * <p>To configure the effects, an object literal with animation options to use as the Element animation
  46  * configuration object can also be specified. Note that the supported Element animation configuration
  47  * options are a subset of the {@link Ext.fx.Anim} animation options specific to Fx effects.  The supported
  48  * Element animation configuration options are:</p>
  49 <pre>
  50 Option    Default   Description
  51 --------- --------  ---------------------------------------------
  52 {@link Ext.fx.Anim#duration duration}  .35       The duration of the animation in seconds
  53 {@link Ext.fx.Anim#easing easing}    easeOut   The easing method
  54 {@link Ext.fx.Anim#callback callback}  none      A function to execute when the anim completes
  55 {@link Ext.fx.Anim#scope scope}     this      The scope (this) of the callback function
  56 </pre>
  57  *
  58  * <pre><code>
  59 // Element animation options object
  60 var opt = {
  61     {@link Ext.fx.Anim#duration duration}: 1,
  62     {@link Ext.fx.Anim#easing easing}: 'elasticIn',
  63     {@link Ext.fx.Anim#callback callback}: this.foo,
  64     {@link Ext.fx.Anim#scope scope}: this
  65 };
  66 // animation with some options set
  67 el.setWidth(100, opt);
  68  * </code></pre>
  69  * <p>The Element animation object being used for the animation will be set on the options
  70  * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
  71  * <pre><code>
  72 // using the "anim" property to get the Anim object
  73 if(opt.anim.isAnimated()){
  74     opt.anim.stop();
  75 }
  76  * </code></pre>
  77  * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
  78  * <p><b> Composite (Collections of) Elements</b></p>
  79  * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
  80  * @constructor Create a new Element directly.
  81  * @param {String/HTMLElement} element
  82  * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
  83  */
  84  (function() {
  85     var DOC = document,
  86         EC = Ext.cache;
  87
  88     Ext.Element = Ext.core.Element = function(element, forceNew) {
  89         var dom = typeof element == "string" ? DOC.getElementById(element) : element,
  90         id;
  91
  92         if (!dom) {
  93             return null;
  94         }
  95
  96         id = dom.id;
  97
  98         if (!forceNew && id && EC[id]) {
  99             // element object already exists
 100             return EC[id].el;
 101         }
 102
 103         /**
 104      * The DOM element
 105      * @type HTMLElement
 106      */
 107         this.dom = dom;
 108
 109         /**
 110      * The DOM element ID
 111      * @type String
 112      */
 113         this.id = id || Ext.id(dom);
 114     };
 115
 116     var DH = Ext.core.DomHelper,
 117     El = Ext.core.Element;
 118
 119
 120     El.prototype = {
 121         /**
 122      * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
 123      * @param {Object} o The object with the attributes
 124      * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
 125      * @return {Ext.core.Element} this
 126      */
 127         set: function(o, useSet) {
 128             var el = this.dom,
 129                 attr,
 130                 val;
 131             useSet = (useSet !== false) && !!el.setAttribute;
 132
 133             for (attr in o) {
 134                 if (o.hasOwnProperty(attr)) {
 135                     val = o[attr];
 136                     if (attr == 'style') {
 137                         DH.applyStyles(el, val);
 138                     } else if (attr == 'cls') {
 139                         el.className = val;
 140                     } else if (useSet) {
 141                         el.setAttribute(attr, val);
 142                     } else {
 143                         el[attr] = val;
 144                     }
 145                 }
 146             }
 147             return this;
 148         },
 149
 150         //  Mouse events
 151         /**
 152      * @event click
 153      * Fires when a mouse click is detected within the element.
 154      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 155      * @param {HtmlElement} t The target of the event.
 156      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 157      */
 158         /**
 159      * @event contextmenu
 160      * Fires when a right click is detected within the element.
 161      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 162      * @param {HtmlElement} t The target of the event.
 163      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 164      */
 165         /**
 166      * @event dblclick
 167      * Fires when a mouse double click is detected within the element.
 168      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 169      * @param {HtmlElement} t The target of the event.
 170      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 171      */
 172         /**
 173      * @event mousedown
 174      * Fires when a mousedown is detected within the element.
 175      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 176      * @param {HtmlElement} t The target of the event.
 177      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 178      */
 179         /**
 180      * @event mouseup
 181      * Fires when a mouseup is detected within the element.
 182      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 183      * @param {HtmlElement} t The target of the event.
 184      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 185      */
 186         /**
 187      * @event mouseover
 188      * Fires when a mouseover is detected within the element.
 189      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 190      * @param {HtmlElement} t The target of the event.
 191      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 192      */
 193         /**
 194      * @event mousemove
 195      * Fires when a mousemove is detected with the element.
 196      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 197      * @param {HtmlElement} t The target of the event.
 198      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 199      */
 200         /**
 201      * @event mouseout
 202      * Fires when a mouseout is detected with the element.
 203      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 204      * @param {HtmlElement} t The target of the event.
 205      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 206      */
 207         /**
 208      * @event mouseenter
 209      * Fires when the mouse enters the element.
 210      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 211      * @param {HtmlElement} t The target of the event.
 212      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 213      */
 214         /**
 215      * @event mouseleave
 216      * Fires when the mouse leaves the element.
 217      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 218      * @param {HtmlElement} t The target of the event.
 219      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 220      */
 221
 222         //  Keyboard events
 223         /**
 224      * @event keypress
 225      * Fires when a keypress is detected within the element.
 226      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 227      * @param {HtmlElement} t The target of the event.
 228      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 229      */
 230         /**
 231      * @event keydown
 232      * Fires when a keydown is detected within the element.
 233      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 234      * @param {HtmlElement} t The target of the event.
 235      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 236      */
 237         /**
 238      * @event keyup
 239      * Fires when a keyup is detected within the element.
 240      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 241      * @param {HtmlElement} t The target of the event.
 242      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 243      */
 244
 245
 246         //  HTML frame/object events
 247         /**
 248      * @event load
 249      * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.
 250      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 251      * @param {HtmlElement} t The target of the event.
 252      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 253      */
 254         /**
 255      * @event unload
 256      * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed.
 257      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 258      * @param {HtmlElement} t The target of the event.
 259      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 260      */
 261         /**
 262      * @event abort
 263      * Fires when an object/image is stopped from loading before completely loaded.
 264      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 265      * @param {HtmlElement} t The target of the event.
 266      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 267      */
 268         /**
 269      * @event error
 270      * Fires when an object/image/frame cannot be loaded properly.
 271      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 272      * @param {HtmlElement} t The target of the event.
 273      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 274      */
 275         /**
 276      * @event resize
 277      * Fires when a document view is resized.
 278      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 279      * @param {HtmlElement} t The target of the event.
 280      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 281      */
 282         /**
 283      * @event scroll
 284      * Fires when a document view is scrolled.
 285      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 286      * @param {HtmlElement} t The target of the event.
 287      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 288      */
 289
 290         //  Form events
 291         /**
 292      * @event select
 293      * Fires when a user selects some text in a text field, including input and textarea.
 294      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 295      * @param {HtmlElement} t The target of the event.
 296      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 297      */
 298         /**
 299      * @event change
 300      * Fires when a control loses the input focus and its value has been modified since gaining focus.
 301      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 302      * @param {HtmlElement} t The target of the event.
 303      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 304      */
 305         /**
 306      * @event submit
 307      * Fires when a form is submitted.
 308      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 309      * @param {HtmlElement} t The target of the event.
 310      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 311      */
 312         /**
 313      * @event reset
 314      * Fires when a form is reset.
 315      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 316      * @param {HtmlElement} t The target of the event.
 317      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 318      */
 319         /**
 320      * @event focus
 321      * Fires when an element receives focus either via the pointing device or by tab navigation.
 322      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 323      * @param {HtmlElement} t The target of the event.
 324      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 325      */
 326         /**
 327      * @event blur
 328      * Fires when an element loses focus either via the pointing device or by tabbing navigation.
 329      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 330      * @param {HtmlElement} t The target of the event.
 331      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 332      */
 333
 334         //  User Interface events
 335         /**
 336      * @event DOMFocusIn
 337      * Where supported. Similar to HTML focus event, but can be applied to any focusable element.
 338      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 339      * @param {HtmlElement} t The target of the event.
 340      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 341      */
 342         /**
 343      * @event DOMFocusOut
 344      * Where supported. Similar to HTML blur event, but can be applied to any focusable element.
 345      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 346      * @param {HtmlElement} t The target of the event.
 347      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 348      */
 349         /**
 350      * @event DOMActivate
 351      * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
 352      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 353      * @param {HtmlElement} t The target of the event.
 354      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 355      */
 356
 357         //  DOM Mutation events
 358         /**
 359      * @event DOMSubtreeModified
 360      * Where supported. Fires when the subtree is modified.
 361      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 362      * @param {HtmlElement} t The target of the event.
 363      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 364      */
 365         /**
 366      * @event DOMNodeInserted
 367      * Where supported. Fires when a node has been added as a child of another node.
 368      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 369      * @param {HtmlElement} t The target of the event.
 370      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 371      */
 372         /**
 373      * @event DOMNodeRemoved
 374      * Where supported. Fires when a descendant node of the element is removed.
 375      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 376      * @param {HtmlElement} t The target of the event.
 377      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 378      */
 379         /**
 380      * @event DOMNodeRemovedFromDocument
 381      * Where supported. Fires when a node is being removed from a document.
 382      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 383      * @param {HtmlElement} t The target of the event.
 384      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 385      */
 386         /**
 387      * @event DOMNodeInsertedIntoDocument
 388      * Where supported. Fires when a node is being inserted into a document.
 389      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 390      * @param {HtmlElement} t The target of the event.
 391      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 392      */
 393         /**
 394      * @event DOMAttrModified
 395      * Where supported. Fires when an attribute has been modified.
 396      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 397      * @param {HtmlElement} t The target of the event.
 398      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 399      */
 400         /**
 401      * @event DOMCharacterDataModified
 402      * Where supported. Fires when the character data has been modified.
 403      * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 404      * @param {HtmlElement} t The target of the event.
 405      * @param {Object} o The options configuration passed to the {@link #addListener} call.
 406      */
 407
 408         /**
 409      * The default unit to append to CSS values where a unit isn't provided (defaults to px).
 410      * @type String
 411      */
 412         defaultUnit: "px",
 413
 414         /**
 415      * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
 416      * @param {String} selector The simple selector to test
 417      * @return {Boolean} True if this element matches the selector, else false
 418      */
 419         is: function(simpleSelector) {
 420             return Ext.DomQuery.is(this.dom, simpleSelector);
 421         },
 422
 423         /**
 424      * Tries to focus the element. Any exceptions are caught and ignored.
 425      * @param {Number} defer (optional) Milliseconds to defer the focus
 426      * @return {Ext.core.Element} this
 427      */
 428         focus: function(defer,
 429                         /* private */
 430                         dom) {
 431             var me = this;
 432             dom = dom || me.dom;
 433             try {
 434                 if (Number(defer)) {
 435                     Ext.defer(me.focus, defer, null, [null, dom]);
 436                 } else {
 437                     dom.focus();
 438                 }
 439             } catch(e) {}
 440             return me;
 441         },
 442
 443         /**
 444      * Tries to blur the element. Any exceptions are caught and ignored.
 445      * @return {Ext.core.Element} this
 446      */
 447         blur: function() {
 448             try {
 449                 this.dom.blur();
 450             } catch(e) {}
 451             return this;
 452         },
 453
 454         /**
 455      * Returns the value of the "value" attribute
 456      * @param {Boolean} asNumber true to parse the value as a number
 457      * @return {String/Number}
 458      */
 459         getValue: function(asNumber) {
 460             var val = this.dom.value;
 461             return asNumber ? parseInt(val, 10) : val;
 462         },
 463
 464         /**
 465      * Appends an event handler to this element.  The shorthand version {@link #on} is equivalent.
 466      * @param {String} eventName The name of event to handle.
 467      * @param {Function} fn The handler function the event invokes. This function is passed
 468      * the following parameters:<ul>
 469      * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
 470      * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
 471      * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
 472      * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
 473      * </ul>
 474      * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
 475      * <b>If omitted, defaults to this Element.</b>.
 476      * @param {Object} options (optional) An object containing handler configuration properties.
 477      * This may contain any of the following properties:<ul>
 478      * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
 479      * <b>If omitted, defaults to this Element.</b></div></li>
 480      * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
 481      * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
 482      * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
 483      * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
 484      * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
 485      * <li><b>target</b> Ext.core.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
 486      * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
 487      * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
 488      * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
 489      * by the specified number of milliseconds. If the event fires again within that time, the original
 490      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
 491      * </ul><br>
 492      * <p>
 493      * <b>Combining Options</b><br>
 494      * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
 495      * addListener.  The two are equivalent.  Using the options argument, it is possible to combine different
 496      * types of listeners:<br>
 497      * <br>
 498      * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
 499      * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
 500      * Code:<pre><code>
 501 el.on('click', this.onClick, this, {
 502     single: true,
 503     delay: 100,
 504     stopEvent : true,
 505     forumId: 4
 506 });</code></pre></p>
 507      * <p>
 508      * <b>Attaching multiple handlers in 1 call</b><br>
 509      * The method also allows for a single argument to be passed which is a config object containing properties
 510      * which specify multiple handlers.</p>
 511      * <p>
 512      * Code:<pre><code>
 513 el.on({
 514     'click' : {
 515         fn: this.onClick,
 516         scope: this,
 517         delay: 100
 518     },
 519     'mouseover' : {
 520         fn: this.onMouseOver,
 521         scope: this
 522     },
 523     'mouseout' : {
 524         fn: this.onMouseOut,
 525         scope: this
 526     }
 527 });</code></pre>
 528      * <p>
 529      * Or a shorthand syntax:<br>
 530      * Code:<pre><code></p>
 531 el.on({
 532     'click' : this.onClick,
 533     'mouseover' : this.onMouseOver,
 534     'mouseout' : this.onMouseOut,
 535     scope: this
 536 });
 537      * </code></pre></p>
 538      * <p><b>delegate</b></p>
 539      * <p>This is a configuration option that you can pass along when registering a handler for
 540      * an event to assist with event delegation. Event delegation is a technique that is used to
 541      * reduce memory consumption and prevent exposure to memory-leaks. By registering an event
 542      * for a container element as opposed to each element within a container. By setting this
 543      * configuration option to a simple selector, the target element will be filtered to look for
 544      * a descendant of the target.
 545      * For example:<pre><code>
 546 // using this markup:
 547 &lt;div id='elId'>
 548     &lt;p id='p1'>paragraph one&lt;/p>
 549     &lt;p id='p2' class='clickable'>paragraph two&lt;/p>
 550     &lt;p id='p3'>paragraph three&lt;/p>
 551 &lt;/div>
 552 // utilize event delegation to registering just one handler on the container element:
 553 el = Ext.get('elId');
 554 el.on(
 555     'click',
 556     function(e,t) {
 557         // handle click
 558         console.info(t.id); // 'p2'
 559     },
 560     this,
 561     {
 562         // filter the target element to be a descendant with the class 'clickable'
 563         delegate: '.clickable'
 564     }
 565 );
 566      * </code></pre></p>
 567      * @return {Ext.core.Element} this
 568      */
 569         addListener: function(eventName, fn, scope, options) {
 570             Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
 571             return this;
 572         },
 573
 574         /**
 575      * Removes an event handler from this element.  The shorthand version {@link #un} is equivalent.
 576      * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
 577      * listener, the same scope must be specified here.
 578      * Example:
 579      * <pre><code>
 580 el.removeListener('click', this.handlerFn);
 581 // or
 582 el.un('click', this.handlerFn);
 583 </code></pre>
 584      * @param {String} eventName The name of the event from which to remove the handler.
 585      * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
 586      * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
 587      * then this must refer to the same object.
 588      * @return {Ext.core.Element} this
 589      */
 590         removeListener: function(eventName, fn, scope) {
 591             Ext.EventManager.un(this.dom, eventName, fn, scope || this);
 592             return this;
 593         },
 594
 595         /**
 596      * Removes all previous added listeners from this element
 597      * @return {Ext.core.Element} this
 598      */
 599         removeAllListeners: function() {
 600             Ext.EventManager.removeAll(this.dom);
 601             return this;
 602         },
 603
 604         /**
 605          * Recursively removes all previous added listeners from this element and its children
 606          * @return {Ext.core.Element} this
 607          */
 608         purgeAllListeners: function() {
 609             Ext.EventManager.purgeElement(this);
 610             return this;
 611         },
 612
 613         /**
 614          * @private Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
 615          * @param size {Mixed} The size to set
 616          * @param units {String} The units to append to a numeric size value
 617          */
 618         addUnits: function(size, units) {
 619
 620             // Most common case first: Size is set to a number
 621             if (Ext.isNumber(size)) {
 622                 return size + (units || this.defaultUnit || 'px');
 623             }
 624
 625             // Size set to a value which means "auto"
 626             if (size === "" || size == "auto" || size === undefined || size === null) {
 627                 return size || '';
 628             }
 629
 630             // Otherwise, warn if it's not a valid CSS measurement
 631             if (!unitPattern.test(size)) {
 632                 //<debug>
 633                 if (Ext.isDefined(Ext.global.console)) {
 634                     Ext.global.console.warn("Warning, size detected as NaN on Element.addUnits.");
 635                 }
 636                 //</debug>
 637                 return size || '';
 638             }
 639             return size;
 640         },
 641
 642         /**
 643          * Tests various css rules/browsers to determine if this element uses a border box
 644          * @return {Boolean}
 645          */
 646         isBorderBox: function() {
 647             return Ext.isBorderBox || noBoxAdjust[(this.dom.tagName || "").toLowerCase()];
 648         },
 649
 650         /**
 651          * <p>Removes this element's dom reference.  Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}</p>
 652          */
 653         remove: function() {
 654             var me = this,
 655             dom = me.dom;
 656
 657             if (dom) {
 658                 delete me.dom;
 659                 Ext.removeNode(dom);
 660             }
 661         },
 662
 663         /**
 664          * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
 665          * @param {Function} overFn The function to call when the mouse enters the Element.
 666          * @param {Function} outFn The function to call when the mouse leaves the Element.
 667          * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the functions are executed. Defaults to the Element's DOM element.
 668          * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
 669          * @return {Ext.core.Element} this
 670          */
 671         hover: function(overFn, outFn, scope, options) {
 672             var me = this;
 673             me.on('mouseenter', overFn, scope || me.dom, options);
 674             me.on('mouseleave', outFn, scope || me.dom, options);
 675             return me;
 676         },
 677
 678         /**
 679          * Returns true if this element is an ancestor of the passed element
 680          * @param {HTMLElement/String} el The element to check
 681          * @return {Boolean} True if this element is an ancestor of el, else false
 682          */
 683         contains: function(el) {
 684             return ! el ? false: Ext.core.Element.isAncestor(this.dom, el.dom ? el.dom: el);
 685         },
 686
 687         /**
 688          * Returns the value of a namespaced attribute from the element's underlying DOM node.
 689          * @param {String} namespace The namespace in which to look for the attribute
 690          * @param {String} name The attribute name
 691          * @return {String} The attribute value
 692          * @deprecated
 693          */
 694         getAttributeNS: function(ns, name) {
 695             return this.getAttribute(name, ns);
 696         },
 697
 698         /**
 699          * Returns the value of an attribute from the element's underlying DOM node.
 700          * @param {String} name The attribute name
 701          * @param {String} namespace (optional) The namespace in which to look for the attribute
 702          * @return {String} The attribute value
 703          * @method
 704          */
 705         getAttribute: (Ext.isIE && !(Ext.isIE9 && document.documentMode === 9)) ?
 706         function(name, ns) {
 707             var d = this.dom,
 708             type;
 709             if(ns) {
 710                 type = typeof d[ns + ":" + name];
 711                 if (type != 'undefined' && type != 'unknown') {
 712                     return d[ns + ":" + name] || null;
 713                 }
 714                 return null;
 715             }
 716             if (name === "for") {
 717                 name = "htmlFor";
 718             }
 719             return d[name] || null;
 720         }: function(name, ns) {
 721             var d = this.dom;
 722             if (ns) {
 723                return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name);
 724             }
 725             return  d.getAttribute(name) || d[name] || null;
 726         },
 727
 728         /**
 729          * Update the innerHTML of this element
 730          * @param {String} html The new HTML
 731          * @return {Ext.core.Element} this
 732          */
 733         update: function(html) {
 734             if (this.dom) {
 735                 this.dom.innerHTML = html;
 736             }
 737             return this;
 738         }
 739     };
 740
 741     var ep = El.prototype;
 742
 743     El.addMethods = function(o) {
 744         Ext.apply(ep, o);
 745     };
 746
 747     /**
 748      * Appends an event handler (shorthand for {@link #addListener}).
 749      * @param {String} eventName The name of event to handle.
 750      * @param {Function} fn The handler function the event invokes.
 751      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
 752      * @param {Object} options (optional) An object containing standard {@link #addListener} options
 753      * @member Ext.core.Element
 754      * @method on
 755      */
 756     ep.on = ep.addListener;
 757
 758     /**
 759      * Removes an event handler from this element (see {@link #removeListener} for additional notes).
 760      * @param {String} eventName The name of the event from which to remove the handler.
 761      * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
 762      * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
 763      * then this must refer to the same object.
 764      * @return {Ext.core.Element} this
 765      * @member Ext.core.Element
 766      * @method un
 767      */
 768     ep.un = ep.removeListener;
 769
 770     /**
 771      * Removes all previous added listeners from this element
 772      * @return {Ext.core.Element} this
 773      * @member Ext.core.Element
 774      * @method clearListeners
 775      */
 776     ep.clearListeners = ep.removeAllListeners;
 777
 778     /**
 779      * Removes this element's dom reference.  Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}.
 780      * Alias to {@link #remove}.
 781      * @member Ext.core.Element
 782      * @method destroy
 783      */
 784     ep.destroy = ep.remove;
 785
 786     /**
 787      * true to automatically adjust width and height settings for box-model issues (default to true)
 788      */
 789     ep.autoBoxAdjust = true;
 790
 791     // private
 792     var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
 793     docEl;
 794
 795     /**
 796      * Retrieves Ext.core.Element objects.
 797      * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
 798      * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by
 799      * its ID, use {@link Ext.ComponentManager#get}.</p>
 800      * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
 801      * object was recreated with the same id via AJAX or DOM.</p>
 802      * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
 803      * @return {Element} The Element object (or null if no matching element was found)
 804      * @static
 805      * @member Ext.core.Element
 806      * @method get
 807      */
 808     El.get = function(el) {
 809         var ex,
 810         elm,
 811         id;
 812         if (!el) {
 813             return null;
 814         }
 815         if (typeof el == "string") {
 816             // element id
 817             if (! (elm = DOC.getElementById(el))) {
 818                 return null;
 819             }
 820             if (EC[el] && EC[el].el) {
 821                 ex = EC[el].el;
 822                 ex.dom = elm;
 823             } else {
 824                 ex = El.addToCache(new El(elm));
 825             }
 826             return ex;
 827         } else if (el.tagName) {
 828             // dom element
 829             if (! (id = el.id)) {
 830                 id = Ext.id(el);
 831             }
 832             if (EC[id] && EC[id].el) {
 833                 ex = EC[id].el;
 834                 ex.dom = el;
 835             } else {
 836                 ex = El.addToCache(new El(el));
 837             }
 838             return ex;
 839         } else if (el instanceof El) {
 840             if (el != docEl) {
 841                 // refresh dom element in case no longer valid,
 842                 // catch case where it hasn't been appended
 843                 // If an el instance is passed, don't pass to getElementById without some kind of id
 844                 if (Ext.isIE && (el.id == undefined || el.id == '')) {
 845                     el.dom = el.dom;
 846                 } else {
 847                     el.dom = DOC.getElementById(el.id) || el.dom;
 848                 }
 849             }
 850             return el;
 851         } else if (el.isComposite) {
 852             return el;
 853         } else if (Ext.isArray(el)) {
 854             return El.select(el);
 855         } else if (el == DOC) {
 856             // create a bogus element object representing the document object
 857             if (!docEl) {
 858                 var f = function() {};
 859                 f.prototype = El.prototype;
 860                 docEl = new f();
 861                 docEl.dom = DOC;
 862             }
 863             return docEl;
 864         }
 865         return null;
 866     };
 867
 868     El.addToCache = function(el, id) {
 869         if (el) {
 870             id = id || el.id;
 871             EC[id] = {
 872                 el: el,
 873                 data: {},
 874                 events: {}
 875             };
 876         }
 877         return el;
 878     };
 879
 880     // private method for getting and setting element data
 881     El.data = function(el, key, value) {
 882         el = El.get(el);
 883         if (!el) {
 884             return null;
 885         }
 886         var c = EC[el.id].data;
 887         if (arguments.length == 2) {
 888             return c[key];
 889         } else {
 890             return (c[key] = value);
 891         }
 892     };
 893
 894     // private
 895     // Garbage collection - uncache elements/purge listeners on orphaned elements
 896     // so we don't hold a reference and cause the browser to retain them
 897     function garbageCollect() {
 898         if (!Ext.enableGarbageCollector) {
 899             clearInterval(El.collectorThreadId);
 900         } else {
 901             var eid,
 902             el,
 903             d,
 904             o;
 905
 906             for (eid in EC) {
 907                 if (!EC.hasOwnProperty(eid)) {
 908                     continue;
 909                 }
 910                 o = EC[eid];
 911                 if (o.skipGarbageCollection) {
 912                     continue;
 913                 }
 914                 el = o.el;
 915                 d = el.dom;
 916                 // -------------------------------------------------------
 917                 // Determining what is garbage:
 918                 // -------------------------------------------------------
 919                 // !d
 920                 // dom node is null, definitely garbage
 921                 // -------------------------------------------------------
 922                 // !d.parentNode
 923                 // no parentNode == direct orphan, definitely garbage
 924                 // -------------------------------------------------------
 925                 // !d.offsetParent && !document.getElementById(eid)
 926                 // display none elements have no offsetParent so we will
 927                 // also try to look it up by it's id. However, check
 928                 // offsetParent first so we don't do unneeded lookups.
 929                 // This enables collection of elements that are not orphans
 930                 // directly, but somewhere up the line they have an orphan
 931                 // parent.
 932                 // -------------------------------------------------------
 933                 if (!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))) {
 934                     if (d && Ext.enableListenerCollection) {
 935                         Ext.EventManager.removeAll(d);
 936                     }
 937                     delete EC[eid];
 938                 }
 939             }
 940             // Cleanup IE Object leaks
 941             if (Ext.isIE) {
 942                 var t = {};
 943                 for (eid in EC) {
 944                     if (!EC.hasOwnProperty(eid)) {
 945                         continue;
 946                     }
 947                     t[eid] = EC[eid];
 948                 }
 949                 EC = Ext.cache = t;
 950             }
 951         }
 952     }
 953     El.collectorThreadId = setInterval(garbageCollect, 30000);
 954
 955     var flyFn = function() {};
 956     flyFn.prototype = El.prototype;
 957
 958     // dom is optional
 959     El.Flyweight = function(dom) {
 960         this.dom = dom;
 961     };
 962
 963     El.Flyweight.prototype = new flyFn();
 964     El.Flyweight.prototype.isFlyweight = true;
 965     El._flyweights = {};
 966
 967     /**
 968      * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
 969      * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}</p>
 970      * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
 971      * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get}
 972      * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.</p>
 973      * @param {String/HTMLElement} el The dom node or id
 974      * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
 975      * (e.g. internally Ext uses "_global")
 976      * @return {Element} The shared Element object (or null if no matching element was found)
 977      * @member Ext.core.Element
 978      * @method fly
 979      */
 980     El.fly = function(el, named) {
 981         var ret = null;
 982         named = named || '_global';
 983         el = Ext.getDom(el);
 984         if (el) {
 985             (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
 986             ret = El._flyweights[named];
 987         }
 988         return ret;
 989     };
 990
 991     /**
 992      * Retrieves Ext.core.Element objects.
 993      * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
 994      * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by
 995      * its ID, use {@link Ext.ComponentManager#get}.</p>
 996      * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
 997      * object was recreated with the same id via AJAX or DOM.</p>
 998      * Shorthand of {@link Ext.core.Element#get}
 999      * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
1000      * @return {Element} The Element object (or null if no matching element was found)
1001      * @member Ext
1002      * @method get
1003      */
1004     Ext.get = El.get;
1005
1006     /**
1007      * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
1008      * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}</p>
1009      * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
1010      * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get}
1011      * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.</p>
1012      * @param {String/HTMLElement} el The dom node or id
1013      * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
1014      * (e.g. internally Ext uses "_global")
1015      * @return {Element} The shared Element object (or null if no matching element was found)
1016      * @member Ext
1017      * @method fly
1018      */
1019     Ext.fly = El.fly;
1020
1021     // speedy lookup for elements never to box adjust
1022     var noBoxAdjust = Ext.isStrict ? {
1023         select: 1
1024     }: {
1025         input: 1,
1026         select: 1,
1027         textarea: 1
1028     };
1029     if (Ext.isIE || Ext.isGecko) {
1030         noBoxAdjust['button'] = 1;
1031     }
1032 })();
1033