vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-07-08 03:00:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[jquery] Improve declaration of Events API.

Browse Source 
* Introduced the concept of a triggered event. A triggered event is a jQuery event that has been triggered (either manually by `.trigger()` or `.triggerHandler()`, or automatically by the user agent). Many properties on an event are not set until it has been triggered. Triggered events are now represented by `JQuery.TriggeredEvent`. `JQuery.Event` represents the object returned from the `jQuery.Event` constructor and serves as the base type for all jQuery events.

* Added a type parameter for `currentTarget` (`TCurrentTarget`). Previously, `currentTarget` was set to the type of `delegateTarget`. This was only correct for events received from directly bound event handlers. This allows delegate bound event handlers to specify the correct type of `currentTarget`.

* Added a type parameter for `target` (`TTarget`). Previously, `target` was set to the type of `delegateTarget`. This was not always correct. For delegate bound event handlers, `target` can be `delegateTarget` or any of its descendents. The exact type of `target` cannot be known until run time, so consumers should use a type assertion.

* Changed methods that bind event handlers to more accurately reflect the event object received through the callback. Both direct and delegate binding are now properly handled. This also includes a framework for providing more specific events for known event types.
This commit is contained in:
Leonard Thieu
2018-10-24 08:38:23 -04:00
parent c1ec1c28e5
commit f13af8beb0
6 changed files with 716 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
types/jquery/JQuery.d.ts vendored
View File

@@ -530,7 +530,10 @@ $( document ).ajaxComplete(function( event, request, settings ) {
});
```
*/
ajaxComplete(handler: (this: Document, event: JQuery.Event<Document>, jqXHR: JQuery.jqXHR, ajaxOptions: JQuery.AjaxSettings) => void | false): this;
ajaxComplete(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxOptions: JQuery.AjaxSettings) => void | false): this;
/**
* Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
* @param handler The function to be invoked.
@@ -543,7 +546,11 @@ $( document ).ajaxError(function( event, request, settings ) {
});
```
*/
ajaxError(handler: (this: Document, event: JQuery.Event<Document>, jqXHR: JQuery.jqXHR, ajaxSettings: JQuery.AjaxSettings, thrownError: string) => void | false): this;
ajaxError(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxSettings: JQuery.AjaxSettings,
thrownError: string) => void | false): this;
/**
* Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
* @param handler The function to be invoked.
@@ -556,7 +563,10 @@ $( document ).ajaxSend(function( event, request, settings ) {
});
```
*/
ajaxSend(handler: (this: Document, event: JQuery.Event<Document>, jqXHR: JQuery.jqXHR, ajaxOptions: JQuery.AjaxSettings) => void | false): this;
ajaxSend(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxOptions: JQuery.AjaxSettings) => void | false): this;
/**
* Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
* @param handler The function to be invoked.
@@ -595,7 +605,11 @@ $( document ).ajaxSuccess(function( event, request, settings ) {
});
```
*/
ajaxSuccess(handler: (this: Document, event: JQuery.Event<Document>, jqXHR: JQuery.jqXHR, ajaxOptions: JQuery.AjaxSettings, data: JQuery.PlainObject) => void | false): this;
ajaxSuccess(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxOptions: JQuery.AjaxSettings,
data: JQuery.PlainObject) => void | false): this;
/**
* Perform a custom animation of a set of CSS properties.
* @param properties An object of CSS properties and values that the animation will move toward.
@@ -1329,9 +1343,12 @@ $( "p" ).before( $( "b" ) );
*
* **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
*/
bind<TData>(eventType: string,
eventData: TData,
handler: JQuery.EventHandler<TElement, TData>): this;
bind<TType extends string,
TData>(
eventType: TType,
eventData: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TElement, TType>
): this;
/**
* Attach a handler to an event for the elements.
* @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
@@ -1458,8 +1475,13 @@ $( "button" ).click(function() {
</html>
```
*/
bind(eventType: string,
handler_preventBubble: JQuery.EventHandler<TElement> | false | null | undefined): this;
bind<TType extends string>(
eventType: TType,
handler_preventBubble: JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TElement, TType> |
false |
null |
undefined
): this;
/**
* Attach a handler to an event for the elements.
* @param events An object containing one or more DOM event types and functions to execute for them.
@@ -1485,7 +1507,7 @@ $( "div.test" ).bind({
});
```
*/
bind(events: JQuery.PlainObject<JQuery.EventHandler<TElement> | false>): this;
bind(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement, TElement>): this;
/**
* Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
* @param eventData An object containing data that will be passed to the event handler.
@@ -2713,10 +2735,13 @@ $( "button" ).click(function() {
*
* **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
*/
delegate<TData>(selector: JQuery.Selector,
eventType: string,
eventData: TData,
handler: JQuery.EventHandler<TElement, TData>): this;
delegate<TType extends string,
TData>(
selector: JQuery.Selector,
eventType: TType,
eventData: TData,
handler: JQuery.TypeEventHandler<TElement, TData, any, any, any, TType>
): this;
/**
* Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
* @param selector A selector to filter the elements that trigger the event.
@@ -2828,9 +2853,12 @@ $( "button" ).click(function() {
</html>
```
*/
delegate(selector: JQuery.Selector,
eventType: string,
handler: JQuery.EventHandler<TElement> | false): this;
delegate<TType extends string>(
selector: JQuery.Selector,
eventType: TType,
handler: JQuery.TypeEventHandler<TElement, undefined, any, any, any, TType> |
false
): this;
/**
* Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
* @param selector A selector to filter the elements that trigger the event.
@@ -2844,7 +2872,8 @@ $( "button" ).click(function() {
* **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
*/
delegate(selector: JQuery.Selector,
events: JQuery.PlainObject<JQuery.EventHandler<TElement> | false>): this;
events: JQuery.TypeEventHandlers<TElement, undefined, any, any, any>
): this;
/**
* Execute the next function on the queue for the matched elements.
* @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
@@ -7245,7 +7274,10 @@ $( "body" ).on( "click", "p", foo );
$( "body" ).off( "click", "p", foo );
```
*/
off(events: string, selector: JQuery.Selector, handler: JQuery.EventHandlerBase<any, JQuery.Event<TElement, any>> | false): this;
off(events: string,
selector: JQuery.Selector,
handler: JQuery.TypeEventHandler<TElement, any, any, any, any, string> |
false): this;
/**
* Remove an event handler.
* @param events One or more space-separated event types and optional namespaces, or just namespaces, such as
@@ -7275,7 +7307,10 @@ $( "form" ).on( "keypress.validator", "input[type='text']", validate );
$( "form" ).off( ".validator" );
```
*/
off(events: string, selector_handler?: JQuery.Selector | JQuery.EventHandlerBase<any, JQuery.Event<TElement, any>> | false): this;
off(events: string,
selector_handler?: JQuery.Selector |
JQuery.TypeEventHandler<TElement, any, any, any, any, string> |
false): this;
/**
* Remove an event handler.
* @param events An object where the string keys represent one or more space-separated event types and optional
@@ -7284,7 +7319,8 @@ $( "form" ).off( ".validator" );
* @see \`{@link https://api.jquery.com/off/ }\`
* @since 1.7
*/
off(events: JQuery.PlainObject<JQuery.EventHandlerBase<any, JQuery.Event<TElement, any>> | false>, selector?: JQuery.Selector): this;
off(events: JQuery.TypeEventHandlers<TElement, any, any, any, any>,
selector?: JQuery.Selector): this;
/**
* Remove an event handler.
* @param event A jQuery.Event object.
@@ -7295,7 +7331,7 @@ $( "form" ).off( ".validator" );
$( "p" ).off();
```
*/
off(event?: JQuery.Event<TElement>): this;
off(event?: JQuery.TriggeredEvent<TElement>): this;
/**
* Set the current coordinates of every element in the set of matched elements, relative to the document.
* @param coordinates_function _&#x40;param_ `coordinates_function`
@@ -7468,10 +7504,30 @@ $( "*", document.body ).click(function( event ) {
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
*/
on<TData>(events: string,
selector: JQuery.Selector | null,
data: TData,
handler: JQuery.EventHandler<TElement, TData>): this;
on<TType extends string,
TData>(
events: TType,
selector: JQuery.Selector,
data: TData,
handler: JQuery.TypeEventHandler<TElement, TData, any, any, any, TType>
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
* @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
* selector is null or omitted, the event is always triggered when it reaches the selected element.
* @param data Data to be passed to the handler in event.data when an event is triggered.
* @param handler A function to execute when the event is triggered.
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
*/
on<TType extends string,
TData>(
events: TType,
selector: null | undefined,
data: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TElement, TType>
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@@ -7484,7 +7540,7 @@ $( "*", document.body ).click(function( event ) {
* @deprecated ​ Deprecated. Use \`{@link JQuery.Event }\` in place of \`{@link JQueryEventObject }\`.
*/
on(events: string,
selector: JQuery.Selector | null,
selector: JQuery.Selector | null | undefined,
data: any,
handler: ((event: JQueryEventObject) => void)): this;
/**
@@ -7547,14 +7603,41 @@ $( "body" ).on( "click", "a", function( event ) {
});
```
*/
on(events: string,
selector: JQuery.Selector,
handler: JQuery.EventHandler<TElement> | false): this;
on<TType extends string>(
events: TType,
selector: JQuery.Selector,
handler: JQuery.TypeEventHandler<TElement, undefined, any, any, any, TType> |
false
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
* @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
* selector is null or omitted, the event is always triggered when it reaches the selected element.
* @param data Data to be passed to the handler in event.data when an event is triggered.
* @param handler A function to execute when the event is triggered.
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
* @example ​ ````Pass data to the event handler, which is specified here by name:
```javascript
function myHandler( event ) {
alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );
```
*/
on<TType extends string,
TData>(
events: TType,
data: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TElement, TType>
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
* @param selector_data _&#x40;param_ `selector_data`
* <br>
* * `selector` — A selector string to filter the descendants of the selected elements that trigger the event. If the
* selector is null or omitted, the event is always triggered when it reaches the selected element. <br>
* * `data` — Data to be passed to the handler in event.data when an event is triggered.
* @param handler A function to execute when the event is triggered.
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
@@ -7609,37 +7692,6 @@ $( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
});
```
*/
on(events: string,
selector: JQuery.Selector,
// tslint:disable-next-line:unified-signatures
handler: ((event: JQueryEventObject) => void)): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
* @param data Data to be passed to the handler in event.data when an event is triggered.
* @param handler A function to execute when the event is triggered.
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
* @example ​ ````Pass data to the event handler, which is specified here by name:
```javascript
function myHandler( event ) {
alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );
```
*/
on<TData>(events: string,
data: TData,
handler: JQuery.EventHandler<TElement, TData>): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
* @param data Data to be passed to the handler in event.data when an event is triggered.
* @param handler A function to execute when the event is triggered.
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
* @deprecated ​ Deprecated. Use \`{@link JQuery.Event }\` in place of \`{@link JQueryEventObject }\`.
* @example ​ ````Pass data to the event handler, which is specified here by name:
```javascript
function myHandler( event ) {
@@ -7649,8 +7701,7 @@ $( "p" ).on( "click", { foo: "bar" }, myHandler );
```
*/
on(events: string,
// tslint:disable-next-line:unified-signatures
data: any,
selector_data: any,
handler: ((event: JQueryEventObject) => void)): this;
/**
* Attach an event handler function for one or more events to the selected elements.
@@ -7743,8 +7794,11 @@ $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
});
```
*/
on(events: string,
handler: JQuery.EventHandler<TElement> | false): this;
on<TType extends string>(
events: TType,
handler: JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TElement, TType> |
false
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@@ -7837,7 +7891,6 @@ $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
```
*/
on(events: string,
// tslint:disable-next-line:unified-signatures
handler: ((event: JQueryEventObject) => void)): this;
/**
* Attach an event handler function for one or more events to the selected elements.
@@ -7849,9 +7902,26 @@ $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
*/
on<TData>(events: JQuery.PlainObject<JQuery.EventHandler<TElement, TData> | false>,
selector: JQuery.Selector | null,
data: TData): this;
on<TData>(
events: JQuery.TypeEventHandlers<TElement, TData, any, any, any>,
selector: JQuery.Selector,
data: TData
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events An object in which the string keys represent one or more space-separated event types and optional
* namespaces, and the values represent a handler function to be called for the event(s).
* @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
* the selector is null or omitted, the handler is always called when it reaches the selected element.
* @param data Data to be passed to the handler in event.data when an event occurs.
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
*/
on<TData>(
events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement, TElement>,
selector: null | undefined,
data: TData
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events An object in which the string keys represent one or more space-separated event types and optional
@@ -7861,9 +7931,9 @@ $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
*/
on(events: JQuery.PlainObject<JQuery.EventHandler<TElement> | false>,
// tslint:disable-next-line:unified-signatures
selector: JQuery.Selector): this;
on(events: JQuery.TypeEventHandlers<TElement, undefined, any, any, any>,
selector: JQuery.Selector
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events An object in which the string keys represent one or more space-separated event types and optional
@@ -7872,8 +7942,10 @@ $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
* @see \`{@link https://api.jquery.com/on/ }\`
* @since 1.7
*/
on<TData>(events: JQuery.PlainObject<JQuery.EventHandler<TElement, TData> | false>,
data: TData): this;
on<TData>(
events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement, TElement>,
data: TData
): this;
/**
* Attach an event handler function for one or more events to the selected elements.
* @param events An object in which the string keys represent one or more space-separated event types and optional
@@ -7922,7 +7994,7 @@ $( "div.test" ).on({
</html>
```
*/
on(events: JQuery.PlainObject<JQuery.EventHandler<TElement> | false>): this;
on(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement, TElement>): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@@ -7933,10 +8005,30 @@ $( "div.test" ).on({
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one<TData>(events: string,
selector: JQuery.Selector | null,
data: TData,
handler: JQuery.EventHandler<TElement, TData>): this;
one<TType extends string,
TData>(
events: TType,
selector: JQuery.Selector,
data: TData,
handler: JQuery.TypeEventHandler<TElement, TData, any, any, any, TType>
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
* @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
* selector is null or omitted, the event is always triggered when it reaches the selected element.
* @param data Data to be passed to the handler in event.data when an event is triggered.
* @param handler A function to execute when the event is triggered.
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one<TType extends string,
TData>(
events: TType,
selector: null | undefined,
data: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TElement, TType>
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@@ -7947,9 +8039,12 @@ $( "div.test" ).on({
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one(events: string,
one<TType extends string>(
events: TType,
selector: JQuery.Selector,
handler: JQuery.EventHandler<TElement> | false): this;
handler: JQuery.TypeEventHandler<TElement, undefined, any, any, any, TType> |
false
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@@ -7958,9 +8053,12 @@ $( "div.test" ).on({
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one<TData>(events: string,
data: TData,
handler: JQuery.EventHandler<TElement, TData>): this;
one<TType extends string,
TData>(
events: TType,
data: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TElement, TType>
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
@@ -8049,8 +8147,11 @@ $(".target").one("click mouseenter", function() {
</html>
```
*/
one(events: string,
handler: JQuery.EventHandler<TElement> | false): this;
one<TType extends string>(
events: TType,
handler: JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TElement, TType>|
false
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events An object in which the string keys represent one or more space-separated event types and optional
@@ -8061,9 +8162,26 @@ $(".target").one("click mouseenter", function() {
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one<TData>(events: JQuery.PlainObject<JQuery.EventHandler<TElement, TData> | false>,
selector: JQuery.Selector | null,
data: TData): this;
one<TData>(
events: JQuery.TypeEventHandlers<TElement, TData, any, any, any>,
selector: JQuery.Selector,
data: TData
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events An object in which the string keys represent one or more space-separated event types and optional
* namespaces, and the values represent a handler function to be called for the event(s).
* @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
* the selector is null or omitted, the handler is always called when it reaches the selected element.
* @param data Data to be passed to the handler in event.data when an event occurs.
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one<TData>(
events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement, TElement>,
selector: null | undefined,
data: TData
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events An object in which the string keys represent one or more space-separated event types and optional
@@ -8073,8 +8191,7 @@ $(".target").one("click mouseenter", function() {
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one(events: JQuery.PlainObject<JQuery.EventHandler<TElement> | false>,
// tslint:disable-next-line:unified-signatures
one(events: JQuery.TypeEventHandlers<TElement, undefined, any, any, any>,
selector: JQuery.Selector): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
@@ -8084,8 +8201,10 @@ $(".target").one("click mouseenter", function() {
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one<TData>(events: JQuery.PlainObject<JQuery.EventHandler<TElement, TData> | false>,
data: TData): this;
one<TData>(
events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement, TElement>,
data: TData
): this;
/**
* Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
* @param events An object in which the string keys represent one or more space-separated event types and optional
@@ -8093,7 +8212,7 @@ $(".target").one("click mouseenter", function() {
* @see \`{@link https://api.jquery.com/one/ }\`
* @since 1.7
*/
one(events: JQuery.PlainObject<JQuery.EventHandler<TElement> | false>): this;
one(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement, TElement>): this;
/**
* Set the CSS outer height of each element in the set of matched elements.
* @param value_function _&#x40;param_ `value_function`
@@ -11704,7 +11823,7 @@ $( "body" ).trigger({
});
```
*/
trigger(eventType_event: string | JQuery.Event<TElement>, extraParameters?: any[] | JQuery.PlainObject | string | number | boolean): this;
trigger(eventType_event: string | JQuery.Event, extraParameters?: any[] | JQuery.PlainObject | string | number | boolean): this;
/**
* Execute all handlers attached to an element for an event.
* @param eventType_event _&#x40;param_ `eventType_event`
@@ -11747,7 +11866,7 @@ $( "input" ).focus(function() {
</html>
```
*/
triggerHandler(eventType_event: string | JQuery.Event<TElement>, extraParameters?: any[] | JQuery.PlainObject | string | number | boolean): any;
triggerHandler(eventType_event: string | JQuery.Event, extraParameters?: any[] | JQuery.PlainObject | string | number | boolean): any;
/**
* Remove a previously-attached event handler from the elements.
* @param event A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
@@ -11815,7 +11934,10 @@ $( "p" ).bind( "click", foo ); // ... Now foo will be called when paragraphs are
$( "p" ).unbind( "click", foo ); // ... foo will no longer be called.
```
*/
unbind(event: string, handler: JQuery.EventHandlerBase<any, JQuery.Event<TElement, any>> | false): this;
unbind(event: string,
handler: JQuery.TypeEventHandler<TElement, any, TElement, TElement, TElement, string> |
false
): this;
/**
* Remove a previously-attached event handler from the elements.
* @param event A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
@@ -11836,7 +11958,7 @@ $( "p" ).unbind();
$( "p" ).unbind( "click" );
```
*/
unbind(event?: string | JQuery.Event<TElement>): this;
unbind(event?: string | JQuery.TriggeredEvent<TElement>): this;
/**
* Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
* @param selector A selector which will be used to filter the event results.
@@ -11906,12 +12028,18 @@ $( "body" ).delegate( "p", "click", foo );
$( "body" ).undelegate( "p", "click", foo );
```
*/
undelegate(selector: JQuery.Selector, eventType: string, handler: JQuery.EventHandlerBase<any, JQuery.Event<TElement, any>> | false): this;
undelegate(selector: JQuery.Selector,
eventType: string,
handler: JQuery.TypeEventHandler<TElement, any, any, any, any, string> |
false
): this;
/**
* Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
* @param selector A selector which will be used to filter the event results.
* @param eventTypes A string containing a JavaScript event type, such as "click" or "keydown"
* An object of one or more event types and previously bound functions to unbind from them.
* @param eventType_events _&#x40;param_ `eventType_events`
* <br>
* * `eventType` — A string containing a JavaScript event type, such as "click" or "keydown" <br>
* * `events` — An object of one or more event types and previously bound functions to unbind from them.
* @see \`{@link https://api.jquery.com/undelegate/ }\`
* @since 1.4.2
* @since 1.4.3
@@ -11921,7 +12049,9 @@ $( "body" ).undelegate( "p", "click", foo );
*
* **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
*/
undelegate(selector: JQuery.Selector, eventTypes: string | JQuery.PlainObject<JQuery.EventHandlerBase<any, JQuery.Event<TElement, any>> | false>): this;
undelegate(selector: JQuery.Selector,
eventType_events: string |
JQuery.TypeEventHandlers<TElement, any, any, any, any>): this;
/**
* Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
* @param namespace A selector which will be used to filter the event results.

221
types/jquery/jquery-tests.ts
View File

@@ -2430,7 +2430,7 @@ function JQuery() {
$(document).ajaxComplete(function(event, jqXHR, ajaxOptions) {
// $ExpectType Document
this;
// $ExpectType Event<Document, null>
// $ExpectType TriggeredEvent<Document, undefined, Document, Document>
event;
// $ExpectType jqXHR<any>
jqXHR;
@@ -2446,7 +2446,7 @@ function JQuery() {
$(document).ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
// $ExpectType Document
this;
// $ExpectType Event<Document, null>
// $ExpectType TriggeredEvent<Document, undefined, Document, Document>
event;
// $ExpectType jqXHR<any>
jqXHR;
@@ -2464,7 +2464,7 @@ function JQuery() {
$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
// $ExpectType Document
this;
// $ExpectType Event<Document, null>
// $ExpectType TriggeredEvent<Document, undefined, Document, Document>
event;
// $ExpectType jqXHR<any>
jqXHR;
@@ -2500,7 +2500,7 @@ function JQuery() {
$(document).ajaxSuccess(function(event, jqXHR, ajaxOptions, data) {
// $ExpectType Document
this;
// $ExpectType Event<Document, null>
// $ExpectType TriggeredEvent<Document, undefined, Document, Document>
event;
// $ExpectType jqXHR<any>
jqXHR;
@@ -3887,7 +3887,7 @@ function JQuery() {
$('p').bind('myEvent', 'myData', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
});
@@ -3895,45 +3895,45 @@ function JQuery() {
$('p').bind('myEvent', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('p').bind('myEvent', false);
// $ExpectType JQuery<HTMLElement>
$('p').bind('myEvent', null);
// $ExpectType JQuery<HTMLElement>
$('p').bind('myEvent', undefined);
// $ExpectType JQuery<HTMLElement>
$('p').bind({
myEvent1: false,
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>
event;
}
});
// $ExpectType JQuery<HTMLElement>
$('p').bind('myEvent', null);
// $ExpectType JQuery<HTMLElement>
$('p').bind('myEvent', undefined);
}
}
function delegate() {
// $ExpectType JQuery<HTMLElement>
$('table').delegate('td', 'myEvent', 'myData', function(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, any, any>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').delegate('td', 'myEvent', function(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, any, any>
event;
});
@@ -3942,20 +3942,20 @@ function JQuery() {
// $ExpectType JQuery<HTMLElement>
$('table').delegate('td', {
myEvent1(event) {
// $ExpectType HTMLElement
myEvent1: false,
myEvent2(event) {
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, any, any>
event;
},
myEvent2: false
}
});
}
function off() {
function defaultData(this: HTMLElement, event: JQuery.Event<HTMLElement>) { }
function defaultData(this: HTMLElement, event: JQuery.TriggeredEvent<HTMLElement>) { }
function customData(this: HTMLElement, event: JQuery.Event<HTMLElement, string>) { }
function customData(this: HTMLElement, event: JQuery.TriggeredEvent<HTMLElement, string>) { }
// $ExpectType JQuery<HTMLElement>
$('table').off('myEvent', 'td', defaultData);
@@ -3995,27 +3995,19 @@ function JQuery() {
customData
});
const ev: JQuery.TriggeredEvent<HTMLElement> = undefined!;
// $ExpectType JQuery<HTMLElement>
$('table').off($.Event('myEvent'));
$('table').off(ev);
// $ExpectType JQuery<HTMLElement>
$('table').off();
}
function on() {
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', 'td', 'myData', function(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, string>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', 'td', 'myData', function(event: JQueryEventObject) {
// $ExpectType HTMLElement
this;
// $ExpectType JQueryEventObject
// $ExpectType TriggeredEvent<HTMLElement, string, any, any>
event;
});
@@ -4023,12 +4015,38 @@ function JQuery() {
$('table').on('myEvent', null, 'myData', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', undefined, 'myData', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', 'td', 'myData', function(event: JQueryEventObject) {
// $ExpectType any
this;
// $ExpectType JQueryEventObject
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', null, 'myData', function(event: JQueryEventObject) {
// TODO: Why is this HTMLElement? The callback signature doesn't even have `this` declared.
// $ExpectType HTMLElement
this;
// $ExpectType JQueryEventObject
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', undefined, 'myData', function(event: JQueryEventObject) {
// TODO: Why is this HTMLElement? The callback signature doesn't even have `this` declared.
// $ExpectType HTMLElement
this;
// $ExpectType JQueryEventObject
@@ -4037,17 +4055,9 @@ function JQuery() {
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', 'td', function(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, null>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', 'td', function(event: JQueryEventObject) {
// $ExpectType HTMLElement
this;
// $ExpectType JQueryEventObject
// $ExpectType TriggeredEvent<HTMLElement, undefined, any, any>
event;
});
@@ -4058,7 +4068,15 @@ function JQuery() {
$('table').on('myEvent', 3, function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, number>
// $ExpectType TriggeredEvent<HTMLElement, number, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', 'td', function(event: JQueryEventObject) {
// $ExpectType any
this;
// $ExpectType JQueryEventObject
event;
});
@@ -4074,10 +4092,13 @@ function JQuery() {
$('table').on('myEvent', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', false);
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', function(event: JQueryEventObject) {
// $ExpectType HTMLElement
@@ -4110,16 +4131,13 @@ function JQuery() {
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').on('myEvent', false);
// $ExpectType JQuery<HTMLElement>
$('table').on({
myEvent1: false,
myEvent2(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, any, any>
event;
}
}, 'td', 'myData');
@@ -4130,7 +4148,7 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
}
}, null, 'myData');
@@ -4141,7 +4159,18 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
}
}, undefined, 'myData');
// $ExpectType JQuery<HTMLElement>
$('table').on({
myEvent1: false,
myEvent2(event) {
// $ExpectType any
this;
// $ExpectType TriggeredEvent<HTMLElement, undefined, any, any>
event;
}
}, 'td');
@@ -4152,7 +4181,7 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, number>
// $ExpectType TriggeredEvent<HTMLElement, number, HTMLElement, HTMLElement>
event;
}
}, 3);
@@ -4163,7 +4192,7 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>
event;
}
});
@@ -4172,9 +4201,9 @@ function JQuery() {
function one() {
// $ExpectType JQuery<HTMLElement>
$('table').one('myEvent', 'td', 'myData', function(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, any, any>
event;
});
@@ -4182,15 +4211,23 @@ function JQuery() {
$('table').one('myEvent', null, 'myData', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').one('myEvent', undefined, 'myData', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
});
// $ExpectType JQuery<HTMLElement>
$('table').one('myEvent', 'td', function(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, any, any>
event;
});
@@ -4201,7 +4238,7 @@ function JQuery() {
$('table').one('myEvent', 3, function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, number>
// $ExpectType TriggeredEvent<HTMLElement, number, HTMLElement, HTMLElement>
event;
});
@@ -4209,7 +4246,7 @@ function JQuery() {
$('table').one('myEvent', function(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>
event;
});
@@ -4220,9 +4257,9 @@ function JQuery() {
$('table').one({
myEvent1: false,
myEvent2(event) {
// $ExpectType HTMLElement
// $ExpectType any
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, any, any>
event;
}
}, 'td', 'myData');
@@ -4233,7 +4270,7 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, string>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
}
}, null, 'myData');
@@ -4244,7 +4281,18 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, string, HTMLElement, HTMLElement>
event;
}
}, undefined, 'myData');
// $ExpectType JQuery<HTMLElement>
$('table').one({
myEvent1: false,
myEvent2(event) {
// $ExpectType any
this;
// $ExpectType TriggeredEvent<HTMLElement, undefined, any, any>
event;
}
}, 'td');
@@ -4255,7 +4303,7 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, number>
// $ExpectType TriggeredEvent<HTMLElement, number, HTMLElement, HTMLElement>
event;
}
}, 3);
@@ -4266,7 +4314,7 @@ function JQuery() {
myEvent2(event) {
// $ExpectType HTMLElement
this;
// $ExpectType Event<HTMLElement, null>
// $ExpectType TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>
event;
}
});
@@ -4337,9 +4385,9 @@ function JQuery() {
}
function unbind() {
function defaultData(this: HTMLElement, event: JQuery.Event<HTMLElement>) { }
function defaultData(this: HTMLElement, event: JQuery.TriggeredEvent<HTMLElement>) { }
function customData(this: HTMLElement, event: JQuery.Event<HTMLElement, string>) { }
function customData(this: HTMLElement, event: JQuery.TriggeredEvent<HTMLElement, string>) { }
// $ExpectType JQuery<HTMLElement>
$('p').unbind('myEvent', defaultData);
@@ -4353,17 +4401,18 @@ function JQuery() {
// $ExpectType JQuery<HTMLElement>
$('p').unbind('myEvent');
const ev: JQuery.TriggeredEvent<HTMLElement> = undefined!;
// $ExpectType JQuery<HTMLElement>
$('p').unbind($.Event('myEvent'));
$('p').unbind(ev);
// $ExpectType JQuery<HTMLElement>
$('p').unbind();
}
function undelegate() {
function defaultData(this: HTMLElement, event: JQuery.Event<HTMLElement>) { }
function defaultData(this: HTMLElement, event: JQuery.TriggeredEvent<HTMLElement>) { }
function customData(this: HTMLElement, event: JQuery.Event<HTMLElement, string>) { }
function customData(this: HTMLElement, event: JQuery.TriggeredEvent<HTMLElement, string>) { }
// $ExpectType JQuery<HTMLElement>
$('table').undelegate('td', 'click', defaultData);
@@ -7696,18 +7745,18 @@ function JQuery_Effects() {
function JQuery_Event() {
function call_signature() {
// $ExpectType Event<HTMLElement, null> & Coordinates
// $ExpectType Event & Coordinates
$.Event('keydown', $('p').offset());
}
function constructor() {
// $ExpectType Event<HTMLElement, null> & Coordinates
// $ExpectType Event & Coordinates
new $.Event('keydown', $('p').offset());
}
// https://stackoverflow.com/questions/49892574/trigger-a-jquery-3-event-with-ctrlkey-set
function stackoverflow_49892574() {
const event = $.Event<object, Window>("keydown");
const event = $.Event("keydown");
event.which = 77;
event.ctrlKey = true;
$(window).trigger(event);
@@ -7727,7 +7776,7 @@ function JQuery_EventExtensions() {
data;
// $ExpectType string
namespaces;
// $ExpectType EventHandler<EventTarget, any>
// $ExpectType EventHandlerBase<EventTarget, TriggeredEvent<EventTarget, any, any, any>>
eventHandle;
return false;
@@ -7753,7 +7802,7 @@ function JQuery_EventExtensions() {
trigger(event, data) {
// $ExpectType EventTarget
this;
// $ExpectType Event<EventTarget, any>
// $ExpectType Event
event;
// $ExpectType any
data;
@@ -7761,7 +7810,7 @@ function JQuery_EventExtensions() {
return false;
},
_default(event, data) {
// $ExpectType Event<EventTarget, any>
// $ExpectType TriggeredEvent<EventTarget, any, any, any>
event;
// $ExpectType any
data;
@@ -7769,7 +7818,7 @@ function JQuery_EventExtensions() {
return false;
},
handle(event, data) {
// $ExpectType Event<EventTarget, any> & { handleObj: HandleObject<EventTarget, any>; }
// $ExpectType TriggeredEvent<EventTarget, any, any, any> & { handleObj: HandleObject<EventTarget, any>; }
event;
// $ExpectType any
data;
@@ -7777,7 +7826,7 @@ function JQuery_EventExtensions() {
preDispatch(event) {
// $ExpectType EventTarget
this;
// $ExpectType Event<EventTarget, any>
// $ExpectType Event
event;
return false;
@@ -7785,7 +7834,7 @@ function JQuery_EventExtensions() {
postDispatch(event) {
// $ExpectType EventTarget
this;
// $ExpectType Event<EventTarget, any>
// $ExpectType Event
event;
}
};

588
types/jquery/misc.d.ts vendored
View File

@@ -3981,45 +3981,97 @@ $( "input" ).click(function() {
// This should be a class but doesn't work correctly under the JQuery namespace. Event should be an inner class of jQuery.
// Static members
/**
* jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.
*
* Those properties are all documented, and accompanied by examples, on the \`{@link http://api.jquery.com/category/events/event-object/ Event object}\` page.
*
* The standard events in the Document Object Model are: `blur`, `focus`, `load`, `resize`, `scroll`, `unload`, `beforeunload`, `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `change`, `select`, `submit`, `keydown`, `keypress`, and `keyup`. Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any.
* @see \`{@link https://api.jquery.com/category/events/event-object/ }\`
*/
interface EventStatic {
// tslint:disable-next-line:no-unnecessary-generics
<T extends object, TTarget extends EventTarget = HTMLElement>(event: string, properties?: T): Event<TTarget> & T;
// tslint:disable-next-line:no-unnecessary-generics
new <T extends object, TTarget extends EventTarget = HTMLElement>(event: string, properties?: T): Event<TTarget> & T;
/**
* The jQuery.Event constructor is exposed and can be used when calling trigger. The new operator is optional.
*
* Check \`{@link https://api.jquery.com/trigger/ trigger}\`'s documentation to see how to combine it with your own event object.
* @see \`{@link https://api.jquery.com/category/events/event-object/ }\`
* @since 1.6
* @example
```javascript
//Create a new jQuery.Event object without the "new" operator.
var e = jQuery.Event( "click" );
​
// trigger an artificial click event
jQuery( "body" ).trigger( e );
```
* @example
```javascript
// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event( "keydown", { keyCode: 64 } );
​
// trigger an artificial keydown event with keyCode 64
jQuery( "body" ).trigger( e );
```
*/
<T extends object>(event: string, properties?: T): Event & T;
/**
* The jQuery.Event constructor is exposed and can be used when calling trigger. The new operator is optional.
*
* Check \`{@link https://api.jquery.com/trigger/ trigger}\`'s documentation to see how to combine it with your own event object.
* @see \`{@link https://api.jquery.com/category/events/event-object/ }\`
* @since 1.6
* @example
```javascript
//Create a new jQuery.Event object without the "new" operator.
var e = jQuery.Event( "click" );
​
// trigger an artificial click event
jQuery( "body" ).trigger( e );
```
* @example
```javascript
// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event( "keydown", { keyCode: 64 } );
​
// trigger an artificial keydown event with keyCode 64
jQuery( "body" ).trigger( e );
```
*/
new <T extends object>(event: string, properties?: T): Event & T;
}
// Instance members
/**
* jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.
*
* Those properties are all documented, and accompanied by examples, on the \`{@link http://api.jquery.com/category/events/event-object/ Event object}\` page.
*
* The standard events in the Document Object Model are: `blur`, `focus`, `load`, `resize`, `scroll`, `unload`, `beforeunload`, `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `change`, `select`, `submit`, `keydown`, `keypress`, and `keyup`. Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any.
* @see \`{@link https://api.jquery.com/category/events/event-object/ }\`
* @see \`{@link TriggeredEvent }\`
*/
interface Event {
// region Copied properties
// #region Copied properties
// region Event
// #region Event
// Event
bubbles?: boolean;
cancelable?: boolean;
eventPhase?: number;
bubbles: boolean | undefined;
cancelable: boolean | undefined;
eventPhase: number | undefined;
// #endregion
// UIEvent
// region UIEvent
// #region UIEvent
detail: number | undefined;
view: Window | undefined;
detail?: number;
view?: Window;
// MouseEvent
// #endregion
// region MouseEvent
// #region MouseEvent
button?: number;
buttons?: number;
clientX?: number;
clientY?: number;
offsetX?: number;
offsetY?: number;
button: number | undefined;
buttons: number | undefined;
clientX: number | undefined;
clientY: number | undefined;
offsetX: number | undefined;
offsetY: number | undefined;
/**
* The mouse position relative to the left edge of the document.
* @see \`{@link https://api.jquery.com/event.pageX/ }\`
@@ -4055,7 +4107,7 @@ $( document ).on( "mousemove", function( event ) {
</html>
```
*/
pageX: number;
pageX: number | undefined;
/**
* The mouse position relative to the top edge of the document.
* @see \`{@link https://api.jquery.com/event.pageY/ }\`
@@ -4091,49 +4143,93 @@ $( document ).on( "mousemove", function( event ) {
</html>
```
*/
pageY: number;
screenX?: number;
screenY?: number;
pageY: number | undefined;
screenX: number | undefined;
screenY: number | undefined;
/** @deprecated */
toElement?: Element;
toElement: Element | undefined;
// #endregion
// PointerEvent
// region PointerEvent
// #region PointerEvent
pointerId: number | undefined;
pointerType: string | undefined;
pointerId?: number;
pointerType?: string;
// #endregion
// region KeyboardEvent
// #region KeyboardEvent
// KeyboardEvent
/** @deprecated */
char?: string;
char: string | undefined;
/** @deprecated */
charCode?: number;
key?: string;
charCode: number | undefined;
key: string | undefined;
/** @deprecated */
keyCode?: number;
keyCode: number | undefined;
// #endregion
// TouchEvent
// region TouchEvent
// #region TouchEvent
changedTouches: TouchList | undefined;
targetTouches: TouchList | undefined;
touches: TouchList | undefined;
changedTouches?: TouchList;
targetTouches?: TouchList;
touches?: TouchList;
// MouseEvent, KeyboardEvent
// #endregion
/**
* For key or mouse events, this property indicates the specific key or button that was pressed.
* @see \`{@link https://api.jquery.com/event.which/ }\`
* @since 1.1.3
* @deprecated ​ Deprecated since 3.3. See \`{@link https://github.com/jquery/api.jquery.com/issues/821 }\`.
* @example ​ ````Log which key was depressed.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input id="whichkey" value="type something">
<div id="log"></div>
​
<script>
$( "#whichkey" ).on( "keydown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which );
});
</script>
​
</body>
</html>
```
* @example ​ ````Log which mouse button was depressed.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input id="whichkey" value="click here">
<div id="log"></div>
​
<script>
$( "#whichkey" ).on( "mousedown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which );
});
</script>
​
</body>
</html>
```
*/
which: number | undefined;
// region MouseEvent, KeyboardEvent, TouchEvent
// #region MouseEvent, KeyboardEvent, TouchEvent
// MouseEvent, KeyboardEvent, TouchEvent
altKey?: boolean;
ctrlKey?: boolean;
altKey: boolean | undefined;
ctrlKey: boolean | undefined;
/**
* Indicates whether the META key was pressed when the event fired.
* @see \`{@link https://api.jquery.com/event.metaKey/ }\`
@@ -4170,77 +4266,11 @@ $( "#checkMetaKey" ).click(function( event ) {
</html>
```
*/
metaKey: boolean;
shiftKey?: boolean;
metaKey: boolean | undefined;
shiftKey: boolean | undefined;
// #endregion
// #endregion
/**
* The namespace specified when the event was triggered.
* @see \`{@link https://api.jquery.com/event.namespace/ }\`
* @since 1.4.3
* @example ​ ````Determine the event namespace used.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.namespace demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button>display event.namespace</button>
<p></p>
​
<script>
$( "p" ).on( "test.something", function( event ) {
alert( event.namespace );
});
$( "button" ).click(function( event ) {
$( "p" ).trigger( "test.something" );
});
</script>
​
</body>
</html>
```
*/
namespace: string;
/**
* The last value returned by an event handler that was triggered by this event, unless the value was undefined.
* @see \`{@link https://api.jquery.com/event.result/ }\`
* @since 1.3
* @example ​ ````Display previous handler&#39;s return value
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.result demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button>display event.result</button>
<p></p>
​
<script>
$( "button" ).click(function( event ) {
return "hey";
});
$( "button" ).click(function( event ) {
$( "p" ).html( event.result );
});
</script>
​
</body>
</html>
```
*/
result: any;
/**
* The difference in milliseconds between the time the browser created the event and January 1, 1970.
* @see \`{@link https://api.jquery.com/event.timeStamp/ }\`
@@ -4297,59 +4327,6 @@ $( "a" ).click(function( event ) {
```
*/
type: string;
/**
* For key or mouse events, this property indicates the specific key or button that was pressed.
* @see \`{@link https://api.jquery.com/event.which/ }\`
* @since 1.1.3
* @deprecated ​ Deprecated since 3.3. See \`{@link https://github.com/jquery/api.jquery.com/issues/821 }\`.
* @example ​ ````Log which key was depressed.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input id="whichkey" value="type something">
<div id="log"></div>
​
<script>
$( "#whichkey" ).on( "keydown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which );
});
</script>
​
</body>
</html>
```
* @example ​ ````Log which mouse button was depressed.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input id="whichkey" value="click here">
<div id="log"></div>
​
<script>
$( "#whichkey" ).on( "mousedown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which );
});
</script>
​
</body>
</html>
```
*/
which: number;
/**
* Returns whether event.preventDefault() was ever called on this event object.
* @see \`{@link https://api.jquery.com/event.isDefaultPrevented/ }\`
@@ -4542,11 +4519,17 @@ $( "p" ).click(function( event ) {
stopPropagation(): void;
}
// Generic members
interface Event<
TTarget = EventTarget,
TData = null
> {
// #endregion
/**
* Base type for jQuery events that have been triggered (including events triggered on plain objects).
*/
interface TriggeredEvent<
TDelegateTarget = any,
TData = any,
TCurrentTarget = any,
TTarget = any
> extends Event {
/**
* The current DOM element within the event bubbling phase.
* @see \`{@link https://api.jquery.com/event.currentTarget/ }\`
@@ -4557,51 +4540,8 @@ $( "p" ).click(function( event ) {
alert( event.currentTarget === this ); // true
});
```
*/
currentTarget: TTarget;
/**
* An optional object of data passed to an event method when the current executing handler is bound.
* @see \`{@link https://api.jquery.com/event.data/ }\`
* @since 1.1
* @example ​ ````Within a for loop, pass the value of i to the .on() method so that the current iteration&#39;s value is preserved.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.data demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button>
​
<div id="log"></div>
​
<script>
var logDiv = $( "#log" );
​
for ( var i = 0; i < 5; i++ ) {
$( "button" ).eq( i ).on( "click", { value: i }, function( event ) {
var msgs = [
"button = " + $( this ).index(),
"event.data.value = " + event.data.value,
"i = " + i
];
logDiv.append( msgs.join( ", " ) + "<br>" );
});
}
</script>
​
</body>
</html>
```
*/
data: TData;
*/
currentTarget: TCurrentTarget;
/**
* The element where the currently-called jQuery event handler was attached.
* @see \`{@link https://api.jquery.com/event.delegateTarget/ }\`
@@ -4612,21 +4552,8 @@ $( ".box" ).on( "click", "button", function( event ) {
$( event.delegateTarget ).css( "background-color", "red" );
});
```
*/
delegateTarget: TTarget;
originalEvent: _Event;
/**
* The other DOM element involved in the event, if any.
* @see \`{@link https://api.jquery.com/event.relatedTarget/ }\`
* @since 1.1.4
* @example ​ ````On mouseout of anchors, alert the element type being entered.
```javascript
$( "a" ).mouseout(function( event ) {
alert( event.relatedTarget.nodeName ); // "DIV"
});
```
*/
relatedTarget: TTarget | null;
*/
delegateTarget: TDelegateTarget;
/**
* The DOM element that initiated the event.
* @see \`{@link https://api.jquery.com/event.target/ }\`
@@ -4704,17 +4631,173 @@ $( "ul" ).click( handler ).find( "ul" ).hide();
</body>
</html>
```
*/
*/
target: TTarget;
/**
* An optional object of data passed to an event method when the current executing handler is bound.
* @see \`{@link https://api.jquery.com/event.data/ }\`
* @since 1.1
* @example ​ ````Within a for loop, pass the value of i to the .on() method so that the current iteration&#39;s value is preserved.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.data demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button>
​
<div id="log"></div>
​
<script>
var logDiv = $( "#log" );
​
for ( var i = 0; i < 5; i++ ) {
$( "button" ).eq( i ).on( "click", { value: i }, function( event ) {
var msgs = [
"button = " + $( this ).index(),
"event.data.value = " + event.data.value,
"i = " + i
];
logDiv.append( msgs.join( ", " ) + "<br>" );
});
}
</script>
​
</body>
</html>
```
*/
data: TData;
/**
* The namespace specified when the event was triggered.
* @see \`{@link https://api.jquery.com/event.namespace/ }\`
* @since 1.4.3
* @example ​ ````Determine the event namespace used.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.namespace demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button>display event.namespace</button>
<p></p>
​
<script>
$( "p" ).on( "test.something", function( event ) {
alert( event.namespace );
});
$( "button" ).click(function( event ) {
$( "p" ).trigger( "test.something" );
});
</script>
​
</body>
</html>
```
*/
namespace?: string;
/**
* The last value returned by an event handler that was triggered by this event, unless the value was undefined.
* @see \`{@link https://api.jquery.com/event.result/ }\`
* @since 1.3
* @example ​ ````Display previous handler&#39;s return value
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.result demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button>display event.result</button>
<p></p>
​
<script>
$( "button" ).click(function( event ) {
return "hey";
});
$( "button" ).click(function( event ) {
$( "p" ).html( event.result );
});
</script>
​
</body>
</html>
```
*/
result?: any;
}
// #endregion
interface EventHandler<TCurrentTarget, TData = null> extends EventHandlerBase<TCurrentTarget, Event<TCurrentTarget, TData>> { }
interface TypeToTriggeredEventMap<
TDelegateTarget,
TData,
TCurrentTarget,
TTarget
> {
[type: string]: TriggeredEvent<TDelegateTarget, TData, TCurrentTarget, TTarget>;
}
// Extra parameters can be passed from trigger()
type EventHandlerBase<TContext, T> = (this: TContext, t: T, ...args: any[]) => any;
type EventHandler<
TCurrentTarget,
TData = undefined
> = EventHandlerBase<TCurrentTarget, TriggeredEvent<TCurrentTarget, TData>>;
type TypeEventHandler<
TDelegateTarget,
TData,
TCurrentTarget,
TTarget,
TContext,
TType extends keyof TypeToTriggeredEventMap<TDelegateTarget, TData, TCurrentTarget, TTarget>
> = EventHandlerBase<TContext, TypeToTriggeredEventMap<TDelegateTarget, TData, TCurrentTarget, TTarget>[TType]>;
interface TypeEventHandlers<
TDelegateTarget,
TData,
TCurrentTarget,
TTarget,
TContext
> extends _TypeEventHandlers<TDelegateTarget, TData, TCurrentTarget, TTarget, TContext> {
// No idea why it's necessary to include `object` in the union but otherwise TypeScript complains that
// derived types of Event are not assignable to Event.
[type: string]: TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, TContext, string> |
false |
undefined |
object;
}
type _TypeEventHandlers<
TDelegateTarget,
TData,
TCurrentTarget,
TTarget,
TContext
> = {
[TType in keyof TypeToTriggeredEventMap<TDelegateTarget, TData, TCurrentTarget, TTarget>]?:
TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, TContext, TType> |
false |
object;
};
// region Event extensions
// #region Event extensions
@@ -4791,13 +4874,13 @@ $( "ul" ).click( handler ).find( "ul" ).hide();
* The trigger hook is called early in the process of triggering an event, just after the `jQuery.Event` object is constructed and before any handlers have been called. It can process the triggered event in any way, for example by calling `event.stopPropagation()` or `event.preventDefault()` before returning. If the hook returns `false`, jQuery does not perform any further event triggering actions and returns immediately. Otherwise, it performs the normal trigger processing, calling any event handlers for the element and bubbling the event (unless propagation is stopped in advance or `noBubble` was specified for the special event) to call event handlers attached to parent elements.
* @see \`{@link https://learn.jquery.com/events/event-extensions/#trigger-function-event-jquery-event-data-object }\`
*/
trigger(this: TTarget, event: Event<TTarget, TData>, data: TData): void | false;
trigger(this: TTarget, event: Event, data: TData): void | false;
} | {
/**
* When the `.trigger()` method finishes running all the event handlers for an event, it also looks for and runs any method on the target object by the same name unless of the handlers called `event.preventDefault()`. So, `.trigger( "submit" )` will execute the `submit()` method on the element if one exists. When a `_default` hook is specified, the hook is called just prior to checking for and executing the element's default method. If this hook returns the value `false` the element's default method will be called; otherwise it is not.
* @see \`{@link https://learn.jquery.com/events/event-extensions/#_default-function-event-jquery-event-data-object }\`
*/
_default(event: Event<TTarget, TData>, data: TData): void | false;
_default(event: TriggeredEvent<TTarget, TData>, data: TData): void | false;
} | {
/**
* jQuery calls a handle hook when the event has occurred and jQuery would normally call the user's event handler specified by `.on()` or another event binding method. If the hook exists, jQuery calls it _instead_ of that event handler, passing it the event and any data passed from `.trigger()` if it was not a native event. The `this` keyword is the DOM element being handled, and `event.handleObj` property has the detailed event information.
@@ -4805,11 +4888,11 @@ $( "ul" ).click( handler ).find( "ul" ).hide();
* Based in the information it has, the handle hook should decide whether to call the original handler function which is in `event.handleObj.handler`. It can modify information in the event object before calling the original handler, but _must restore_ that data before returning or subsequent unrelated event handlers may act unpredictably. In most cases, the handle hook should return the result of the original handler, but that is at the discretion of the hook. The handle hook is unique in that it is the only special event function hook that is called under its original special event name when the type is mapped using `bindType` and `delegateType`. For that reason, it is almost always an error to have anything other than a handle hook present if the special event defines a `bindType` and `delegateType`, since those other hooks will never be called.
* @see \`{@link https://learn.jquery.com/events/event-extensions/#handle-function-event-jquery-event-data-object }\`
*/
handle(this: TTarget, event: Event<TTarget, TData> & { handleObj: HandleObject<TTarget, TData>; }, ...data: TData[]): void;
handle(this: TTarget, event: TriggeredEvent<TTarget, TData> & { handleObj: HandleObject<TTarget, TData>; }, ...data: TData[]): void;
} | {
preDispatch(this: TTarget, event: Event<TTarget, TData>): false | void;
preDispatch(this: TTarget, event: Event): false | void;
} | {
postDispatch(this: TTarget, event: Event<TTarget, TData>): void;
postDispatch(this: TTarget, event: Event): void;
} | {
[key: string]: never;
};
@@ -4901,7 +4984,6 @@ $( "ul" ).click( handler ).find( "ul" ).hide();
declare const jQuery: JQueryStatic;
declare const $: JQueryStatic;
// Used by JQuery.Event
type _Event = Event;
// region ES5 compatibility

18
types/jquery/test/example-tests.ts
View File

@@ -384,7 +384,7 @@ function examples() {
}
function bind_2() {
function handler(event: JQuery.Event<HTMLElement, any>) {
function handler(event: JQuery.TriggeredEvent<HTMLElement>) {
alert(event.data.foo);
}
@@ -830,7 +830,7 @@ function examples() {
var len = kids.addClass('hilite').length;
$('#results span:first').text(len);
$('#results span:last').text(event.target.tagName);
$('#results span:last').text((event.target as Element).tagName);
event.preventDefault();
});
@@ -1614,12 +1614,12 @@ function examples() {
function event_target_0() {
$('body').click(function(event) {
$('#log').html('clicked: ' + event.target.nodeName);
$('#log').html('clicked: ' + (event.target as Node).nodeName);
});
}
function event_target_1() {
function handler(event: JQuery.Event) {
function handler(event: JQuery.TriggeredEvent) {
var target = $(event.target);
if (target.is('li')) {
target.children().toggle();
@@ -3018,10 +3018,10 @@ function examples() {
function jQuery_proxy_0() {
var me = {
type: 'zombie',
test: function(event: JQuery.Event) {
test: function(event: JQuery.TriggeredEvent) {
// Without proxy, `this` would refer to the event target
// use event.target to reference that element.
var element = event.target;
var element = event.target as Element;
$(element).css('background-color', 'red');
// With proxy, `this` refers to the me object encapsulating
@@ -3033,7 +3033,7 @@ function examples() {
var you = {
type: 'person',
test: function(event: JQuery.Event) {
test: function(event: JQuery.TriggeredEvent) {
$('#log').append(this.type + ' ');
},
};
@@ -3075,7 +3075,7 @@ function examples() {
type: 'dog',
// Note that event comes *after* one and two
test: function(one: typeof you, two: typeof they, event: JQuery.Event<HTMLElement>) {
test: function(one: typeof you, two: typeof they, event: JQuery.TriggeredEvent<HTMLElement>) {
$('#log')
// `one` maps to `you`, the 1st additional
@@ -3796,7 +3796,7 @@ function examples() {
}
function on_1() {
function myHandler(event: JQuery.Event<HTMLElement, { foo: string; }>) {
function myHandler(event: JQuery.TriggeredEvent<HTMLElement, { foo: string; }>) {
alert(event.data.foo);
}

2
types/jquery/test/learn-tests.ts
View File

@@ -35,7 +35,7 @@ function special() {
bindType: "click",
handle(event) {
const handleObj = event.handleObj;
const targetData = jQuery.data(event.target);
const targetData = jQuery.data(event.target as Element);
let ret = null;
// If a multiple of the click count, run the handler

4
types/jquery/test/longdesc-tests.ts
View File

@@ -538,7 +538,7 @@ function longdesc() {
$('#foo').slideUp(300).delay(800).fadeIn(400);
}
function delegate_0(elements: HTMLElement[], selector: string, events: any, data: any, handler: JQuery.EventHandler<HTMLElement>) {
function delegate_0(elements: HTMLElement[], selector: string, events: string, data: any, handler: JQuery.TypeEventHandler<HTMLElement, any, any, any, any, string>) {
// jQuery 1.4.3+
$(elements).delegate(selector, events, data, handler);
// jQuery 1.7+
@@ -2016,7 +2016,7 @@ function longdesc() {
}
function on_3() {
function greet(event: JQuery.Event<HTMLElement, { name: string; }>) {
function greet(event: JQuery.TriggeredEvent<HTMLElement, { name: string; }>) {
alert('Hello ' + event.data.name);
}