Just as Ext.core.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(); // same as t (the target HTMLElement)
...
}
var myDiv = Ext.get("myDiv"); // get reference to an Ext.core.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);
Returns a normalized keyCode for the event.
Returns a normalized keyCode for the event.
The key code
Returns a point object that consists of the object coordinates.
Returns a point object that consists of the object coordinates.
point
Gets the related target.
Gets the related target.
(optional) A simple selector to filter the target or look for an ancestor of the target
(optional) The max depth to search as a number or element (defaults to 10 || document.body)
(optional) True to return a Ext.core.Element object instead of DOM node
Gets the target for the event.
Gets the target for the event.
(optional) A simple selector to filter the target or look for an ancestor of the target
(optional) The max depth to search as a number or element (defaults to 10 || document.body)
(optional) True to return a Ext.core.Element object instead of DOM node
Normalizes mouse wheel delta across browsers
Normalizes mouse wheel delta across browsers
The delta
Gets the page coordinates of the event.
Gets the page coordinates of the event.
The xy values like [x, y]
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.
Injects a DOM event using the data in this object and (optionally) a new target. This is a low-level technique and not likely to be used by application code. The currently supported event types are:
HTMLEvents
MouseEvents
UIEvents
If specified, the target for the event. This is likely to be used when relaying a DOM event. If not specified, getTarget is used to determine the target.
Checks if the key pressed was a "special" key
Checks if the key pressed was a "special" key
True if the press is a special keypress
Prevents the browsers default handling of the event.
Prevents the browsers default handling of the event.
Stop the event (preventDefault and stopPropagation)
Stop the event (preventDefault and stopPropagation)
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!');
}
});
// 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!');
}
});
The id, DOM element or Ext.core.Element to check
(optional) true to test if the related target is within el instead of the target
{optional} true to also check if the passed element is the target or related target