- Ext.Element<div class="mdesc"><div class="short">Appends an event handler to this element. The shorthand version on is equivalent.</div><div class="long">Appends an event handler to this element. The shorthand version <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is equivalent.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of event to handle.</div></li><li><code>fn</code> : Function<div class="sub-desc">The handler function the event invokes. This function is passed\r
-the following parameters:<ul>\r
-<li><b>evt</b> : EventObject<div class="sub-desc">The <a href="output/Ext.EventObject.html" ext:cls="Ext.EventObject">EventObject</a> describing the event.</div></li>\r
-<li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.\r
-Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>\r
-<li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>\r
-</ul></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.\r
-<b>If omitted, defaults to this Element.</b>.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration properties.\r
-This may contain any of the following properties:<ul>\r
-<li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.\r
-<b>If omitted, defaults to this Element.</b></div></li>\r
-<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>\r
-<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>\r
-<li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>\r
-<li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>\r
-<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>\r
-<li><b>target</b> Ext.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>\r
-<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>\r
-<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>\r
-<li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">Ext.util.DelayedTask</a> delayed\r
-by the specified number of milliseconds. If the event fires again within that time, the original\r
-handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>\r
-</ul><br>\r
-<p>\r
-<b>Combining Options</b><br>\r
-In the following examples, the shorthand form <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is used rather than the more verbose\r
-addListener. The two are equivalent. Using the options argument, it is possible to combine different\r
-types of listeners:<br>\r
-<br>\r
-A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the\r
-options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">\r
-Code:<pre><code>el.on(<em>'click'</em>, this.onClick, this, {\r
- single: true,\r
- delay: 100,\r
- stopEvent : true,\r
- forumId: 4\r
-});</code></pre></p>\r
-<p>\r
-<b>Attaching multiple handlers in 1 call</b><br>\r
-The method also allows for a single argument to be passed which is a config object containing properties\r
-which specify multiple handlers.</p>\r
-<p>\r
-Code:<pre><code>el.on({\r
- <em>'click'</em> : {\r
- fn: this.onClick,\r
- scope: this,\r
- delay: 100\r
- },\r
- <em>'mouseover'</em> : {\r
- fn: this.onMouseOver,\r
- scope: this\r
- },\r
- <em>'mouseout'</em> : {\r
- fn: this.onMouseOut,\r
- scope: this\r
- }\r
-});</code></pre>\r
-<p>\r
-Or a shorthand syntax:<br>\r
-Code:<pre><code></p>\r
-el.on({\r
- <em>'click'</em> : this.onClick,\r
- <em>'mouseover'</em> : this.onMouseOver,\r
- <em>'mouseout'</em> : this.onMouseOut,\r
- scope: this\r
-});</code></pre></p>\r
-<p><b>delegate</b></p>\r
-<p>This is a configuration option that you can pass along when registering a handler for\r
-an event to assist with event delegation. Event delegation is a technique that is used to\r
-reduce memory consumption and prevent exposure to memory-leaks. By registering an event\r
-for a container element as opposed to each element within a container. By setting this\r
-configuration option to a simple selector, the target element will be filtered to look for\r
-a descendant of the target.\r
-For example:<pre><code><i>// using this markup:\r</i>
-<div id=<em>'elId'</em>>\r
- <p id=<em>'p1'</em>>paragraph one</p>\r
- <p id=<em>'p2'</em> class=<em>'clickable'</em>>paragraph two</p>\r
- <p id=<em>'p3'</em>>paragraph three</p>\r
-</div>\r
-<i>// utilize event delegation to registering just one handler on the container element: \r</i>
-el = Ext.get(<em>'elId'</em>);\r
-el.on(\r
- <em>'click'</em>,\r
- <b>function</b>(e,t) {\r
- <i>// handle click\r</i>
- console.info(t.id); <i>// <em>'p2'</em>\r</i>
- },\r
- this,\r
- {\r
- <i>// filter the target element to be a descendant <b>with</b> the class <em>'clickable'</em>\r</i>
- delegate: <em>'.clickable'</em> \r
- }\r
+ Ext.Element<div class="mdesc"><div class="short">Appends an event handler to this element. The shorthand version on is equivalent.</div><div class="long">Appends an event handler to this element. The shorthand version <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is equivalent.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of event to handle.</div></li><li><code>fn</code> : Function<div class="sub-desc">The handler function the event invokes. This function is passed
+the following parameters:<ul>
+<li><b>evt</b> : EventObject<div class="sub-desc">The <a href="output/Ext.EventObject.html" ext:cls="Ext.EventObject">EventObject</a> describing the event.</div></li>
+<li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
+Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
+<li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
+</ul></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to this Element.</b>.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration properties.
+This may contain any of the following properties:<ul>
+<li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to this Element.</b></div></li>
+<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>
+<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>
+<li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
+<li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
+<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>
+<li><b>target</b> Ext.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>
+<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>
+<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>
+<li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">Ext.util.DelayedTask</a> delayed
+by the specified number of milliseconds. If the event fires again within that time, the original
+handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+</ul><br>
+<p>
+<b>Combining Options</b><br>
+In the following examples, the shorthand form <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is used rather than the more verbose
+addListener. The two are equivalent. Using the options argument, it is possible to combine different
+types of listeners:<br>
+<br>
+A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
+options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
+Code:<pre><code>el.on(<em>'click'</em>, this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});</code></pre></p>
+<p>
+<b>Attaching multiple handlers in 1 call</b><br>
+The method also allows for a single argument to be passed which is a config object containing properties
+which specify multiple handlers.</p>
+<p>
+Code:<pre><code>el.on({
+ <em>'click'</em> : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ <em>'mouseover'</em> : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ <em>'mouseout'</em> : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});</code></pre>
+<p>
+Or a shorthand syntax:<br>
+Code:<pre><code></p>
+el.on({
+ <em>'click'</em> : this.onClick,
+ <em>'mouseover'</em> : this.onMouseOver,
+ <em>'mouseout'</em> : this.onMouseOut,
+ scope: this
+});</code></pre></p>
+<p><b>delegate</b></p>
+<p>This is a configuration option that you can pass along when registering a handler for
+an event to assist with event delegation. Event delegation is a technique that is used to
+reduce memory consumption and prevent exposure to memory-leaks. By registering an event
+for a container element as opposed to each element within a container. By setting this
+configuration option to a simple selector, the target element will be filtered to look for
+a descendant of the target.
+For example:<pre><code><i>// using this markup:</i>
+<div id=<em>'elId'</em>>
+ <p id=<em>'p1'</em>>paragraph one</p>
+ <p id=<em>'p2'</em> class=<em>'clickable'</em>>paragraph two</p>
+ <p id=<em>'p3'</em>>paragraph three</p>
+</div>
+<i>// utilize event delegation to registering just one handler on the container element:</i>
+el = Ext.get(<em>'elId'</em>);
+el.on(
+ <em>'click'</em>,
+ <b>function</b>(e,t) {
+ <i>// handle click</i>
+ console.info(t.id); <i>// <em>'p2'</em></i>
+ },
+ this,
+ {
+ <i>// filter the target element to be a descendant <b>with</b> the class <em>'clickable'</em></i>
+ delegate: <em>'.clickable'</em>
+ }
git.ithinksw.org / extjs.git / blobdiff