Just as
Ext.Element wraps around a native DOM node, Ext.EventObject
+wraps the browser's native event-object normalizing cross-browser differences,
+such as which mouse button is clicked, keys pressed, mechanisms to stop
+event-propagation along with a method to prevent default actions from taking place.
+
For example:
+
function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
e.preventDefault();
- var target = e.getTarget();
+ var target = e.getTarget(); // same as t (the target HTMLElement)
...
- }
- var myDiv = Ext.get("myDiv");
- myDiv.on("click", handleClick);
- //or
- Ext.EventManager.on("myDiv", 'click', handleClick);
- Ext.EventManager.addListener("myDiv", 'click', handleClick);
This class is a singleton and cannot be created directly.
-
-
-
-
-
- |
-
-
- A : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- ALT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- B : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- BACKSPACE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- C : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- CAPS_LOCK : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- CONTEXT_MENU : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- CTRL : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- D : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- DELETE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- DOWN : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- E : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- EIGHT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- END : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- ENTER : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- ESC : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F1 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F10 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F11 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F12 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F2 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F3 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F4 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F5 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F6 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F7 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F8 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- F9 : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- FIVE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- FOUR : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- G : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- H : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- HOME : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- I : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- INSERT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- J : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- K : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- L : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- LEFT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- M : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- N : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NINE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_CENTER : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_DIVISION : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_EIGHT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_FIVE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_FOUR : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_MINUS : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_MULTIPLY : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_NINE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_ONE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_PERIOD : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_PLUS : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_SEVEN : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_SIX : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_THREE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_TWO : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- NUM_ZERO : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- O : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- ONE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- P : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- PAGE_DOWN : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- PAGE_UP : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- PAUSE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- PRINT_SCREEN : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- Q : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- R : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- RETURN : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- RIGHT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- S : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- SEVEN : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- SHIFT : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- SIX : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- SPACE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- T : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- TAB : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- THREE : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- TWO : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- U : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- UP : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- V : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- W : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- X : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- Y : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- Z : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- ZERO : Number
- Key constant
- |
- EventObject |
-
-
- |
-
-
- altKey : Object
- True if the alt key was down during the event
- |
- EventObject |
-
-
- |
-
-
- browserEvent : Object
- The normal browser event
- |
- EventObject |
-
-
- |
-
-
- button : Object
- The button pressed in a mouse event
- |
- EventObject |
-
-
- |
-
-
- ctrlKey : Object
- True if the control key was down during the event
- |
- EventObject |
-
-
- |
-
-
- shiftKey : Object
- True if the shift key was down during the event
- |
- EventObject |
-
-
-
-
-
-
-
- |
-
-
- getCharCode() : Number
- Gets the character code for the event.
-
- Gets the character code for the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getKey() : Number
- Returns a normalized keyCode for the event.
-
- Returns a normalized keyCode for the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getPageX() : Number
- Gets the x coordinate of the event.
-
- Gets the x coordinate of the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getPageY() : Number
- Gets the y coordinate of the event.
-
- Gets the y coordinate of the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getRelatedTarget() : HTMLElement
- Gets the related target.
-
- Gets the related target.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getTarget( [String selector ], [Number/Mixed maxDepth ], [Boolean returnEl ] ) : HTMLelement
- Gets the target for the event.
-
- Gets the target for the event.
- Parameters:
- selector : String(optional) A simple selector to filter the target or look for an ancestor of the target maxDepth : Number/Mixed(optional) The max depth to
- search as a number or element (defaults to 10 || document.body) returnEl : Boolean(optional) True to return a Ext.Element object instead of DOM node
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getTime() : Number
- Gets the time of the event.
-
- Gets the time of the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getWheelDelta() : Number
- Normalizes mouse wheel delta across browsers
-
- Normalizes mouse wheel delta across browsers
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- getXY() : Array
- Gets the page coordinates of the event.
-
- Gets the page coordinates of the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- hasModifier() : Boolean
- Returns true if the control, meta, shift or alt key was pressed during this event.
-
- Returns true if the control, meta, shift or alt key was pressed during this event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- preventDefault() : void
- Prevents the browsers default handling of the event.
-
- Prevents the browsers default handling of the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- stopEvent() : void
- Stop the event (preventDefault and stopPropagation)
-
- Stop the event (preventDefault and stopPropagation)
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- stopPropagation() : void
- Cancels bubbling of the event.
-
- Cancels bubbling of the event.
- Parameters:
-
- Returns:
-
-
-
-
- |
- EventObject |
-
-
- |
-
-
- within( Mixed el , [Boolean related ], Boolean allowEl ) : Boolean
- Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false...
-
- Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
+}
+ var myDiv = Ext.get( "myDiv"); // get reference to an Ext.Element
+myDiv.on( // 'on' is shorthand for addListener
+ "click", // perform an action on click of myDiv
+ handleClick // reference to the action handler
+);
+ // other methods to do the same:
+Ext.EventManager.on( "myDiv", 'click', handleClick);
+Ext.EventManager.addListener( "myDiv", 'click', handleClick); This class is a singleton and cannot be created directly.Public PropertiesThis class has no public properties. Public Methods|
| getCharCode()
+ :
+ NumberGets the character code for the event. Gets the character code for the event. | EventObject | | getKey()
+ :
+ NumberReturns a normalized keyCode for the event. Returns a normalized keyCode for the event. | EventObject | | getPageX()
+ :
+ NumberGets the x coordinate of the event. Gets the x coordinate of the event. | EventObject | | getPageY()
+ :
+ NumberGets the y coordinate of the event. Gets the y coordinate of the event. | EventObject | | getRelatedTarget()
+ :
+ HTMLElement | EventObject | | getTarget( [String selector ], [Number/Mixed maxDepth ], [Boolean returnEl ] )
+ :
+ HTMLelementGets the target for the event. Gets the target for the event. Parameters:selector : String(optional) A simple selector to filter the target or look for an ancestor of the target maxDepth : Number/Mixed(optional) The max depth to
+ search as a number or element (defaults to 10 || document.body) returnEl : Boolean(optional) True to return a Ext.Element object instead of DOM node Returns: | EventObject | | getWheelDelta()
+ :
+ NumberNormalizes mouse wheel delta across browsers Normalizes mouse wheel delta across browsers | EventObject | | getXY()
+ :
+ ArrayGets the page coordinates of the event. Gets the page coordinates of the event. | EventObject | | preventDefault()
+ :
+ voidPrevents the browsers default handling of the event. Prevents the browsers default handling of the event. | EventObject | | stopEvent()
+ :
+ voidStop the event (preventDefault and stopPropagation) Stop the event (preventDefault and stopPropagation) | EventObject | | stopPropagation()
+ :
+ voidCancels bubbling of the event. Cancels bubbling of the event. | EventObject | | within( Mixed el , [Boolean related ], Boolean allowEl )
+ :
+ BooleanReturns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false... Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
Example usage: // Handle click on any child of an element
-Ext.getBody().on('click', function(e){
- if(e.within('some-el')){
- alert('Clicked on a child of some-el!');
- }
-});
+ Ext.getBody().on('click', function(e){
+ if(e.within('some-el')){
+ alert('Clicked on a child of some-el!');
+ }
+ });
-// Handle click directly on an element, ignoring clicks on child nodes
-Ext.getBody().on('click', function(e,t){
- if((t.id == 'some-el') && !e.within(t, true)){
- alert('Clicked directly on some-el!');
- }
-});
- Parameters:
- el : MixedThe id, DOM element or Ext.Element to check related : Boolean(optional) true to test if the related target is within el instead of the target allowEl : Boolean{optional} true to also check if the passed element is the target or related target
- Returns:
-
-
-
-
- |
- EventObject |
-
-
-
- Public Events
- This class has no public events.
-
\ No newline at end of file
+ // Handle click directly on an element, ignoring clicks on child nodes
+ Ext.getBody().on('click', function(e,t){
+ if((t.id == 'some-el') && !e.within(t, true)){
+ alert('Clicked directly on some-el!');
+ }
+ });Parameters:el : MixedThe id, DOM element or Ext.Element to check related : Boolean(optional) true to test if the related target is within el instead of the target allowEl : Boolean{optional} true to also check if the passed element is the target or related target Returns: | EventObject |
This class has no public events.