Форк Rambox
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

389 lines
16 KiB

/**
* @class Ext.EventManager
* Registers event handlers on DOM elements.
*
* This class is deprecated. Please use the Ext.dom.Element api to attach listeners to
* DOM Elements. For example:
*
* var element = Ext.get('myId');
*
* element.on('click', function(e) {
* // event handling logic here
* });
*
* @singleton
* @deprecated 5.0.0
*/
Ext.define('Ext.EventManager', {
singleton: true,
mouseLeaveRe: /(mouseout|mouseleave)/,
mouseEnterRe: /(mouseover|mouseenter)/,
/**
* Appends an event handler to an element. The shorthand version {@link #on} is equivalent.
* Typically you will use {@link Ext.dom.Element#addListener} directly on an Element in favor of
* calling this version.
*
* {@link Ext.EventManager#on} is an alias for {@link Ext.EventManager#addListener}.
*
* @param {String/Ext.dom.Element/HTMLElement/Window} el The html element or id to assign the event handler to.
*
* @param {String} eventName The name of the event to listen for.
* May also be an object who's property names are event names.
*
* @param {Function/String} [handler] The handler function the event invokes. A String parameter
* is assumed to be method name in `scope` object, or Element object if no scope is provided.
* @param {Ext.event.Event} handler.event The {@link Ext.event.Event EventObject} describing the event.
* @param {Ext.dom.Element} handler.target The Element which was the target of the event.
* Note that this may be filtered by using the `delegate` option.
* @param {Object} handler.options The options object from the addListener call.
*
* @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
* Defaults to the Element.
*
* @param {Object} [options] An object containing handler configuration properties.
* This may contain any of the following properties (See {@link Ext.dom.Element#addListener}
* for examples of how to use these options.):
* @param {Object} options.scope The scope (`this` reference) in which the handler function is executed. Defaults to the Element.
* @param {String} options.delegate A simple selector to filter the target or look for a descendant of the target. See {@link Ext.dom.Query} for
* information about simple selectors.
* @param {Boolean} options.stopEvent True to stop the event. That is stop propagation, and prevent the default action.
* @param {Boolean} options.preventDefault True to prevent the default action
* @param {Boolean} options.stopPropagation True to prevent event propagation
* @param {Boolean} options.normalized False to pass a browser event to the handler function instead of an Ext.event.Event
* @param {Number} options.delay The number of milliseconds to delay the invocation of the handler after te event fires.
* @param {Boolean} options.single True to add a handler to handle just the next firing of the event, and then remove itself.
* @param {Number} options.buffer Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
* by the specified number of milliseconds. If the event fires again within that time, the original
* handler is *not* invoked, but the new handler is scheduled in its place.
* @param {Ext.dom.Element} options.target Only call the handler if the event was fired on the target Element,
* *not* if the event was bubbled up from a child node.
* @param {Boolean} options.capture `true` to initiate capture which will fire the listeners on the target Element *before* any descendant Elements.
* Normal events start with the target element and propagate upward to ancestor elements, whereas captured events propagate from the top of the DOM
* downward to descendant elements. This option is the same as the useCapture parameter in the javascript addEventListener method.
*/
addListener: function(element, eventName, fn, scope, options) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Use Ext.dom.Element#addListener to attach an event listener.");
//</debug>
Ext.get(element).addListener(eventName, fn, scope, options);
},
/**
* Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
* passes new viewport width and height to handlers.
* @param {Function} fn The handler function the window resize event invokes.
* @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
* @param {Boolean} [options] Options object as passed to {@link Ext.dom.Element#addListener}
* @deprecated 5.0.0 Use {@link Ext#method-on Ext.on}('resize', fn) to attach a window resize listener.
*/
onWindowResize: function(fn, scope, options) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Use Ext.on('resize', fn) to attach a window resize listener.");
//</debug>
Ext.GlobalEvents.on('resize', fn, scope, options);
},
/**
* Adds a listener to be notified when the browser window is unloaded.
* @param {Function} fn The handler function the window unload event invokes.
* @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
* @param {Boolean} options Options object as passed to {@link Ext.dom.Element#addListener}
* @deprecated 5.0.0
*/
onWindowUnload: function(fn, scope, options) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Use Ext.getWin().on('unload', fn) to attach a window unload listener.");
//</debug>
Ext.getWin().on('unload', fn, scope, options);
},
/**
* Recursively removes all previous added listeners from an element and its children.
* Typically you will use {@link Ext.dom.Element#clearListeners} directly on an Element
* in favor of calling this method.
* @param {String/Ext.dom.Element/HTMLElement/Window} el The id or html element from which
* to remove all event handlers.
* @param {String} eventName (optional) The name of the event.
* @deprecated 5.0.0
*/
purgeElement: function(element, eventName) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Call clearListeners() on a Ext.dom.Element to remove all listeners.");
//</debug>
Ext.get(element).clearListeners();
},
/**
* Removes all event handers from an element. Typically you will use {@link
* Ext.dom.Element#clearListeners} directly on an Element in favor of calling this method.
* @param {String/Ext.dom.Element/HTMLElement/Window} el The id or html element from which
* to remove all event handlers.
* @deprecated 5.0.0
*/
removeAll: function(element) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Call clearListeners() on a Ext.dom.Element to remove all listeners.");
//</debug>
Ext.get(element).clearListeners();
},
/**
* Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically
* you will use {@link Ext.dom.Element#removeListener} directly on an Element in favor of calling this version.
*
* {@link Ext.EventManager#on} is an alias for {@link Ext.EventManager#addListener}.
*
* @param {String/Ext.dom.Element/HTMLElement/Window} el The id or html element from which to remove the listener.
* @param {String} eventName The name of the event.
* @param {Function} fn The handler function to remove. **This must be a reference to the function passed
* into the {@link #addListener} call.**
* @param {Object} scope If a scope (`this` reference) was specified when the listener was added,
* then this must refer to the same object.
*/
removeListener: function(element, eventName, fn, scope, options) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Use Ext.dom.Element#removeListener to remove an event listener.");
//</debug>
Ext.get(element).removeListener(eventName, fn, scope, options);
},
/**
* Removes the passed window resize listener.
* @param {Function} fn The method the event invokes
* @param {Object} scope The scope of handler
* @deprecated 5.0.0
*/
removeResizeListener: function(fn, scope) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Use Ext.on('resize', fn) to detach a window resize listener.");
//</debug>
Ext.GlobalEvents.un('resize', fn, scope);
},
/**
* Removes the passed window unload listener.
* @param {Function} fn The method the event invokes
* @param {Object} scope The scope of handler
* @deprecated 5.0.0
*/
removeUnloadListener: function(fn, scope) {
//<debug>
Ext.log.warn("Ext.EventManager is deprecated. " +
"Use Ext.getWin().un('unload', fn) to detach a window unload listener.");
//</debug>
Ext.getWin().un('unload', fn, scope);
},
/**
* Stop the event (preventDefault and stopPropagation)
* @param {Event} event The event to stop
* @deprecated 5.0.0
*/
stopEvent: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.stopEvent() is deprecated. " +
"Call stopEvent() directly on the Ext.event.Event instance instead.");
//</debug>
this.stopPropagation(event);
this.preventDefault(event);
},
/**
* Cancels bubbling of the event.
* @param {Event} event The event to stop bubbling.
* @deprecated 5.0.0
*/
stopPropagation: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.stopPropagation() is deprecated. " +
"Call stopPropagation() directly on the Ext.event.Event instance instead.");
//</debug>
event = event.browserEvent || event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
/**
* Prevents the browsers default handling of the event.
* @param {Event} event The event to prevent the default
* @deprecated 5.0.0
*/
preventDefault: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.preventDefault() is deprecated. " +
"Call preventDefault() directly on the Ext.event.Event instance instead.");
//</debug>
event = event.browserEvent || event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
// Some keys events require setting the keyCode to -1 to be prevented
try {
// all ctrl + X and F1 -> F12
if (event.ctrlKey || event.keyCode > 111 && event.keyCode < 124) {
event.keyCode = -1;
}
} catch (e) {
// see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
}
}
},
/**
* Get the id of the element. If one has not been assigned, automatically assign it.
* @param {HTMLElement/Ext.dom.Element} element The element to get the id for.
* @return {String} id
* @deprecated 5.0.0
*/
getId: function(element) {
//<debug>
Ext.log.warn("Ext.EventManager.getId() is deprecated. " +
"Call Ext.get() to assign ids to elements.");
//</debug>
element = Ext.get(element);
return element.id;
},
/**
* Gets the related target from the event.
* @param {Object} event The event
* @return {HTMLElement} The related target.
* @deprecated 5.0.0
*/
getRelatedTarget: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.getRelatedTarget() is deprecated. " +
"Call getRelatedTarget() directly on the Ext.event.Event instance instead.");
//</debug>
event = event.browserEvent || event;
var target = event.relatedTarget;
if (!target) {
if (this.mouseLeaveRe.test(event.type)) {
target = event.toElement;
} else if (this.mouseEnterRe.test(event.type)) {
target = event.fromElement;
}
}
return this.resolveTextNode(target);
},
/**
* Gets the x coordinate from the event
* @param {Object} event The event
* @return {Number} The x coordinate
* @deprecated 5.0.0
*/
getPageX: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.getPageX() is deprecated. " +
"Call getX() directly on the Ext.event.Event instance instead.");
//</debug>
return this.getPageXY(event)[0];
},
/**
* Gets the x & y coordinate from the event
* @param {Object} event The event
* @return {Number[]} The x/y coordinate
* @deprecated 5.0.0
*/
getPageXY: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.getPageXY() is deprecated. " +
"Call getXY() directly on the Ext.event.Event instance instead.");
//</debug>
event = event.browserEvent || event;
var x = event.pageX,
y = event.pageY,
docEl = document.documentElement,
body = document.body;
// pageX/pageY not available (undefined, not null), use clientX/clientY instead
if (!x && x !== 0) {
x = event.clientX + (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) - (docEl && docEl.clientLeft || body && body.clientLeft || 0);
y = event.clientY + (docEl && docEl.scrollTop || body && body.scrollTop || 0) - (docEl && docEl.clientTop || body && body.clientTop || 0);
}
return [x, y];
},
/**
* Gets the y coordinate from the event
* @param {Object} event The event
* @return {Number} The y coordinate
* @deprecated 5.0.0
*/
getPageY: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.getPageY() is deprecated. " +
"Call getY() directly on the Ext.event.Event instance instead.");
//</debug>
return this.getPageXY(event)[1];
},
/**
* Gets the target of the event.
* @param {Object} event The event
* @return {HTMLElement} target
* @deprecated 5.0.0
*/
getTarget: function(event) {
//<debug>
Ext.log.warn("Ext.EventManager.getTarget() is deprecated. " +
"Call getTarget() directly on the Ext.event.Event instance instead.");
//</debug>
event = event.browserEvent || event;
return Ext.EventManager.resolveTextNode(event.target || event.srcElement);
},
// technically no need to browser sniff this, however it makes
// no sense to check this every time, for every event, whether
// the string is equal.
/**
* Resolve any text nodes accounting for browser differences.
* @private
* @param {HTMLElement} node The node
* @return {HTMLElement} The resolved node
* @deprecated 5.0.0
*/
resolveTextNode: Ext.isGecko ?
function(node) {
if (node) {
// work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197
var s = HTMLElement.prototype.toString.call(node);
if (s !== '[xpconnect wrapped native prototype]' && s !== '[object XULElement]') {
return node.nodeType === 3 ? node.parentNode: node;
}
}
}
:
function(node) {
return node && node.nodeType === 3 ? node.parentNode: node;
}
}, function(EventManager) {
/**
* @member Ext.EventManager
* @method on
* @inheritdoc Ext.EventManager#addListener
*/
EventManager.on = EventManager.addListener;
/**
* @member Ext.EventManager
* @method un
* @inheritdoc Ext.EventManager#removeListener
*/
EventManager.un = EventManager.removeListener;
});