From 1b00d2bbabfc0fa0d00e1582c34cc5e63bec12a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Mon, 17 Apr 2023 00:26:30 +0200 Subject: [PATCH 01/33] All: Mark event aliases as deprecated Fixes gh-1205 --- entries/blur.xml | 173 +++++++++++++++++++++++++++++------------------ 1 file changed, 109 insertions(+), 64 deletions(-) diff --git a/entries/blur.xml b/entries/blur.xml index 11afbd6a..d09bbe5b 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -1,66 +1,111 @@ - - .blur() + Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on( "blur", handler ) in the first two variations, and .trigger( "blur" ) in the third.

-

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

-

For example, consider the HTML:

-

-<form>
-  <input id="target" type="text" value="Field 1">
-  <input type="text" value="Field 2">
-</form>
-<div id="other">
-  Trigger the handler
-</div>
-The event handler can be bound to the first input field:
-$( "#target" ).blur(function() {
-  alert( "Handler for .blur() called." );
-});
-    
-

Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

-

- Handler for .blur() called. -

-

To trigger the event programmatically, apply .blur() without an argument:

-

-$( "#other" ).click(function() {
-  $( "#target" ).blur();
-});
-    
-

After this code executes, clicks on Trigger the handler will also alert the message.

-

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

-
- - - To trigger the blur event on all paragraphs: - - - - - - -
+ + blur event + + 1.7 + + The string "blur". + + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + +

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

+

For example, consider the HTML:

+

+  <form>
+    <input id="target" type="text" value="Field 1">
+    <input type="text" value="Field 2">
+  </form>
+  <div id="other">
+    Trigger the handler
+  </div>
+  The event handler can be bound to the first input field:
+  $( "#target" ).on( "blur", function() {
+    alert( "Handler for `blur` called." );
+  } );
+      
+

Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

+

+ Handler for `blur` called. +

+

To trigger the event programmatically, call .trigger( "blur" ):

+

+  $( "#other" ).on( "click", function() {
+    $( "#target" ).trigger( "blur" );
+  } );
+      
+

After this code executes, clicks on Trigger the handler will also alert the message.

+

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

+
+ + + To trigger the blur event on all paragraphs: + + + + + +
+ + + .trigger( "blur" ) + + 1.7 + + The string "blur". + + + +

See the description for .on( "blur", ... ).

+
+ + + +
+ + + .blur() + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .blur( handler ) or .blur( eventData, handler ), use .on( "blur", handler ) or .on( "blur", eventData, handler ), respectively.

+

Instead of .blur(), use .trigger( "blur" ).

+
+
+ + + + + +
+ From bff149389117dc7d9ca6c708a8d0204f84a5fc4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Tue, 18 Apr 2023 00:28:27 +0200 Subject: [PATCH 02/33] All: Remove the detach-shorthand note --- entries/blur.xml | 1 - entries/change.xml | 1 - entries/click.xml | 1 - entries/contextmenu.xml | 1 - entries/dblclick.xml | 1 - entries/error.xml | 1 - entries/focus.xml | 1 - entries/focusin.xml | 1 - entries/focusout.xml | 1 - entries/keydown.xml | 1 - entries/keypress.xml | 1 - entries/keyup.xml | 1 - entries/mousedown.xml | 1 - entries/mouseenter.xml | 1 - entries/mouseleave.xml | 1 - entries/mousemove.xml | 1 - entries/mouseout.xml | 1 - entries/mouseover.xml | 1 - entries/mouseup.xml | 1 - entries/resize.xml | 1 - entries/scroll.xml | 1 - entries/select.xml | 1 - entries/submit.xml | 1 - entries/unload.xml | 1 - notes.xsl | 3 --- 25 files changed, 27 deletions(-) diff --git a/entries/blur.xml b/entries/blur.xml index d09bbe5b..5421d170 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -45,7 +45,6 @@

After this code executes, clicks on Trigger the handler will also alert the message.

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

- To trigger the blur event on all paragraphs: - - .ajaxStart() - - 1.0 - - The function to be invoked. - - + Register a handler to be called when the first Ajax request begins. This is an Ajax Event. - -

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

-

To observe this method in action, set up a basic Ajax load request:

-

-<div class="trigger">Trigger</div>
-<div class="result"></div>
-<div class="log"></div>
-    
-

Attach the event handler to any element:

-

-$( document ).ajaxStart(function() {
-  $( ".log" ).text( "Triggered ajaxStart handler." );
-});
-    
-

Now, make an Ajax request using any jQuery method:

-

-$( ".trigger" ).click(function() {
-  $( ".result" ).load( "ajax/test.html" );
-});
-    
-

When the user clicks the element with class trigger and the Ajax request is sent, the log message is displayed.

-
- - - - Show a loading message whenever an Ajax request starts (and none is already active). - - - - -
+ + ajaxStart event + + 1.7 + + The string "ajaxStart". + + + The function to be invoked. + + + +

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.

+

To observe this method in action, set up a basic Ajax load request:

+

+  <div class="trigger">Trigger</div>
+  <div class="result"></div>
+  <div class="log"></div>
+      
+

Attach the event handler to any element:

+

+  $( document ).on( "ajaxStart", function() {
+    $( ".log" ).text( "Triggered ajaxStart handler." );
+  } );
+      
+

Now, make an Ajax request using any jQuery method:

+

+  $( ".trigger" ).on( "click", function() {
+    $( ".result" ).load( "ajax/test.html" );
+  } );
+      
+

When the user clicks the element with class trigger and the Ajax request is sent, the log message is displayed.

+
+ + + + Show a loading message whenever an Ajax request starts (and none is already active). + + + + +
+ + + .ajaxStart() + + 1.0 + + The function to be invoked. + + + +
+

This API is deprecated. Use .on( "ajaxStart", handler ) instead.

+
+
+ + + +
+ diff --git a/notes.xsl b/notes.xsl index fadd5168..42f56937 100644 --- a/notes.xsl +++ b/notes.xsl @@ -53,7 +53,7 @@ If a request with returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by is also available for error handling. - If $.ajax() or $.ajaxSetup() is called with the global option set to false, the method will not fire. + If $.ajax() or $.ajaxSetup() is called with the global option set to false, the event will not fire. If is called on an unordered list (<ul>) and its <li> elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the <ul> has "layout." To remedy the problem, add the position: relative; and zoom: 1; CSS declarations to the ul. @@ -65,7 +65,7 @@ Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance. - As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the method, must be attached to document. + As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with .on( "", ... ), must be attached to document. jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are addClass and removeClass. From 54f5c8eaff50d49f7d0924dd15acf82098528a41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Tue, 18 Apr 2023 01:10:07 +0200 Subject: [PATCH 04/33] All: Fix Additional Notes for all AJAX events --- entries/ajaxComplete.xml | 4 ++-- entries/ajaxError.xml | 4 ++-- entries/ajaxSend.xml | 4 ++-- entries/ajaxStop.xml | 4 ++-- entries/ajaxSuccess.xml | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/entries/ajaxComplete.xml b/entries/ajaxComplete.xml index f96dc4cf..190c4e96 100644 --- a/entries/ajaxComplete.xml +++ b/entries/ajaxComplete.xml @@ -43,8 +43,8 @@ $( document ).ajaxComplete(function( event, xhr, settings ) {

Note: You can get the returned Ajax contents by looking at xhr.responseText.

- - + + Show a message when an Ajax request completes.

After this code executes, clicks on Trigger the handler will also alert the message.

-

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

+

The blur event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods.

To trigger the blur event on all paragraphs: @@ -59,7 +59,7 @@ .trigger( "blur" ) - 1.7 + 1.0 The string "blur". @@ -69,7 +69,7 @@ - + diff --git a/entries/focus.xml b/entries/focus.xml index 96957219..6e29f92b 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -1,100 +1,146 @@ - - .focus() + Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -
    -
  • This method is a shortcut for .on( "focus", handler ) in the first and second variations, and .trigger( "focus" ) in the third.
  • -
  • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
  • -
  • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.
  • -
-
-

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .focus() on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .focus().

-
-

For example, consider the HTML:

-

-<form>
-  <input id="target" type="text" value="Field 1">
-  <input type="text" value="Field 2">
-</form>
-<div id="other">
-  Trigger the handler
-</div>
-    
-

The event handler can be bound to the first input field:

-

-$( "#target" ).focus(function() {
-  alert( "Handler for .focus() called." );
-});
-    
-

Now clicking on the first field, or tabbing to it from another field, displays the alert:

-

- Handler for .focus() called. -

-

We can trigger the event when another element is clicked:

-

-$( "#other" ).click(function() {
-  $( "#target" ).focus();
-});
-    
-

After this code executes, clicks on Trigger the handler will also alert the message.

-

The focus event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the focus event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods, .live() and .delegate().

-
- - Fire focus. - - - - - - To stop people from writing in text input boxes, try: - - - - To focus on a login input box with id 'login' on page startup, try: - - - - - - -
+ + focus event + + 1.7 + + The string "focus". + + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + +
    +
  • This method is a shortcut for .on( "focus", handler ) in the first and second variations, and .trigger( "focus" ) in the third.
  • +
  • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
  • +
  • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.
  • +
+
+

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .trigger( "focus" ) on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .trigger( "focus" ).

+
+

For example, consider the HTML:

+

+  <form>
+    <input id="target" type="text" value="Field 1">
+    <input type="text" value="Field 2">
+  </form>
+  <div id="other">
+    Trigger the handler
+  </div>
+      
+

The event handler can be bound to the first input field:

+

+  $( "#target" ).on( "focus", function() {
+    alert( "Handler for `focus` called." );
+  } );
+      
+

Now clicking on the first field, or tabbing to it from another field, displays the alert:

+

+ Handler for `focus` called. +

+

We can trigger the event when another element is clicked:

+

+  $( "#other" ).on( "click", function() {
+    $( "#target" ).trigger( "focus" );
+  } );
+      
+

After this code executes, clicks on Trigger the handler will also alert the message.

+

The focus event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods.

+
+ + Fire focus. + + + + + + To stop people from writing in text input boxes, try: + + + + To focus on a login input box with id 'login' on page startup, try: + + + + + +
+ + + .trigger( "focus" ) + + 1.0 + + The string "focus". + + + +

See the description for .on( "focus", ... ).

+
+ + + +
+ + + .focus() + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .focus( handler ) or .focus( eventData, handler ), use .on( "focus", handler ) or .on( "focus", eventData, handler ), respectively.

+

Instead of .focus(), use .trigger( "focus" ).

+
+
+ + + + + +
+ From 9c7639f5cd79d74e9612eff3918c0d85bf4d7594 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Tue, 18 Apr 2023 23:42:01 +0200 Subject: [PATCH 06/33] All: Separate blur & focus shorthand pages --- entries/blur-shorthand.xml | 37 +++++++++++++++++++++++++++++++++++++ entries/blur.xml | 36 ------------------------------------ entries/focus-shorthand.xml | 37 +++++++++++++++++++++++++++++++++++++ entries/focus.xml | 36 ------------------------------------ 4 files changed, 74 insertions(+), 72 deletions(-) create mode 100644 entries/blur-shorthand.xml create mode 100644 entries/focus-shorthand.xml diff --git a/entries/blur-shorthand.xml b/entries/blur-shorthand.xml new file mode 100644 index 00000000..650069e2 --- /dev/null +++ b/entries/blur-shorthand.xml @@ -0,0 +1,37 @@ + + + .blur() + Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .blur( handler ) or .blur( eventData, handler ), use .on( "blur", handler ) or .on( "blur", eventData, handler ), respectively.

+

Instead of .blur(), use .trigger( "blur" ).

+
+
+ + + + + +
diff --git a/entries/blur.xml b/entries/blur.xml index 14ff973a..f81242ce 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -71,40 +71,4 @@
- - - .blur() - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -
-

This API is deprecated.

-

Instead of .blur( handler ) or .blur( eventData, handler ), use .on( "blur", handler ) or .on( "blur", eventData, handler ), respectively.

-

Instead of .blur(), use .trigger( "blur" ).

-
-
- - - - - -
diff --git a/entries/focus-shorthand.xml b/entries/focus-shorthand.xml new file mode 100644 index 00000000..0ec654de --- /dev/null +++ b/entries/focus-shorthand.xml @@ -0,0 +1,37 @@ + + + .focus() + Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .focus( handler ) or .focus( eventData, handler ), use .on( "focus", handler ) or .on( "focus", eventData, handler ), respectively.

+

Instead of .focus(), use .trigger( "focus" ).

+
+
+ + + + + +
diff --git a/entries/focus.xml b/entries/focus.xml index 6e29f92b..b4aa2b17 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -107,40 +107,4 @@ - - - .focus() - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -
-

This API is deprecated.

-

Instead of .focus( handler ) or .focus( eventData, handler ), use .on( "focus", handler ) or .on( "focus", eventData, handler ), respectively.

-

Instead of .focus(), use .trigger( "focus" ).

-
-
- - - - - -
From c696ca73b0e146e4effa14745ed415141bd78713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Wed, 19 Apr 2023 00:29:41 +0200 Subject: [PATCH 07/33] All: Tweak focus/blur, migrate focusin/focusout --- entries/blur.xml | 33 +++++----- entries/focus.xml | 56 +++++++++-------- entries/focusin-shorthand.xml | 37 +++++++++++ entries/focusin.xml | 98 ++++++++++++++++------------- entries/focusout-shorthand.xml | 37 +++++++++++ entries/focusout.xml | 109 ++++++++++++++++++--------------- 6 files changed, 236 insertions(+), 134 deletions(-) create mode 100644 entries/focusin-shorthand.xml create mode 100644 entries/focusout-shorthand.xml diff --git a/entries/blur.xml b/entries/blur.xml index f81242ce..8fc17f2c 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -20,17 +20,17 @@

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

For example, consider the HTML:


-  <form>
-    <input id="target" type="text" value="Field 1">
-    <input type="text" value="Field 2">
-  </form>
-  <div id="other">
-    Trigger the handler
-  </div>
-  The event handler can be bound to the first input field:
-  $( "#target" ).on( "blur", function() {
-    alert( "Handler for `blur` called." );
-  } );
+<form>
+  <input id="target" type="text" value="Field 1">
+  <input type="text" value="Field 2">
+</form>
+<div id="other">
+  Trigger the handler
+</div>
+The event handler can be bound to the first input field:
+$( "#target" ).on( "blur", function() {
+  alert( "Handler for `blur` called." );
+} );
       

Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

@@ -38,9 +38,9 @@

To trigger the event programmatically, call .trigger( "blur" ):


-  $( "#other" ).on( "click", function() {
-    $( "#target" ).trigger( "blur" );
-  } );
+$( "#other" ).on( "click", function() {
+  $( "#target" ).trigger( "blur" );
+} );
       

After this code executes, clicks on Trigger the handler will also alert the message.

The blur event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods.

@@ -48,16 +48,17 @@ To trigger the blur event on all paragraphs: + - .trigger( "blur" ) + blur event 1.0 diff --git a/entries/focus.xml b/entries/focus.xml index b4aa2b17..ce1906e7 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -18,7 +18,6 @@
    -
  • This method is a shortcut for .on( "focus", handler ) in the first and second variations, and .trigger( "focus" ) in the third.
  • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
  • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.
@@ -27,19 +26,19 @@

For example, consider the HTML:


-  <form>
-    <input id="target" type="text" value="Field 1">
-    <input type="text" value="Field 2">
-  </form>
-  <div id="other">
-    Trigger the handler
-  </div>
+<form>
+  <input id="target" type="text" value="Field 1">
+  <input type="text" value="Field 2">
+</form>
+<div id="other">
+  Trigger the handler
+</div>
       

The event handler can be bound to the first input field:


-  $( "#target" ).on( "focus", function() {
-    alert( "Handler for `focus` called." );
-  } );
+$( "#target" ).on( "focus", function() {
+  alert( "Handler for `focus` called." );
+} );
       

Now clicking on the first field, or tabbing to it from another field, displays the alert:

@@ -47,9 +46,9 @@

We can trigger the event when another element is clicked:


-  $( "#other" ).on( "click", function() {
-    $( "#target" ).trigger( "focus" );
-  } );
+$( "#other" ).on( "click", function() {
+  $( "#target" ).trigger( "focus" );
+} );
       

After this code executes, clicks on Trigger the handler will also alert the message.

The focus event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods.

@@ -57,14 +56,14 @@ Fire focus.
To focus on a login input box with id 'login' on page startup, try: + + - .trigger( "focus" ) + focus event 1.0 @@ -106,5 +107,6 @@ + diff --git a/entries/focusin-shorthand.xml b/entries/focusin-shorthand.xml new file mode 100644 index 00000000..61203709 --- /dev/null +++ b/entries/focusin-shorthand.xml @@ -0,0 +1,37 @@ + + + .focusin() + Bind an event handler to the "focusin" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .focusin( handler ) or .focusin( eventData, handler ), use .on( "focusin", handler ) or .on( "focusin", eventData, handler ), respectively.

+

Instead of .focusin(), use .trigger( "focusin" ).

+
+
+ + + + + +
diff --git a/entries/focusin.xml b/entries/focusin.xml index b980cc86..ead13090 100644 --- a/entries/focusin.xml +++ b/entries/focusin.xml @@ -1,51 +1,63 @@ - - .focusin() + Bind an event handler to the "focusin" event. - - 1.4 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on( "focusin", handler ) in the first two variations, and .trigger( "focusin" ) in the third.

-

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

-

This event will likely be used together with the focusout event.

-
- - Watch for a focus to occur within the paragraphs on the page. - - + - + - - - - - -
+ ]]> +
+ + + + + + + + + focusin event + + 1.0 + + The string "focusin". + + + +

See the description for .on( "focusin", ... ).

+
+ + + + +
+ diff --git a/entries/focusout-shorthand.xml b/entries/focusout-shorthand.xml new file mode 100644 index 00000000..c5b24ee3 --- /dev/null +++ b/entries/focusout-shorthand.xml @@ -0,0 +1,37 @@ + + + .focusout() + Bind an event handler to the "focusout" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .focusout( handler ) or .focusout( eventData, handler ), use .on( "focusout", handler ) or .on( "focusout", eventData, handler ), respectively.

+

Instead of .focusout(), use .trigger( "focusout" ).

+
+
+ + + + + +
diff --git a/entries/focusout.xml b/entries/focusout.xml index fa4f6944..17f6af8d 100644 --- a/entries/focusout.xml +++ b/entries/focusout.xml @@ -1,35 +1,29 @@ - - .focusout() + Bind an event handler to the "focusout" JavaScript event. - - 1.4 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on( "focusout", handler ) when passed arguments, and .trigger( "focusout" ) when no arguments are passed.

-

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

-

This event will likely be used together with the focusin event.

-
- - Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count. (The blur count does not change because those events do not bubble.) - - + - + - - - - - -
+ ]]> + + + + + + + + + + focusout event + + 1.0 + + The string "focusout". + + + +

See the description for .on( "focusout", ... ).

+
+ + + + +
+ From 3b02e6b27dcb6f8bb80f17cf304baf588b766cd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Wed, 19 Apr 2023 00:32:06 +0200 Subject: [PATCH 08/33] All: Fix indentation of examples --- entries/blur.xml | 2 +- entries/focus.xml | 10 +++++----- entries/focusin.xml | 6 +++--- entries/focusout.xml | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/entries/blur.xml b/entries/blur.xml index 8fc17f2c..56d6881c 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -49,7 +49,7 @@ $( "#other" ).on( "click", function() { To trigger the blur event on all paragraphs: +]]> diff --git a/entries/focus.xml b/entries/focus.xml index ce1906e7..8ddb8c34 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -59,16 +59,16 @@ $( "#other" ).on( "click", function() { span { display: none; } - ]]> +]]> +]]> +]]> To stop people from writing in text input boxes, try: @@ -76,7 +76,7 @@ $( "input" ).on( "focus", function() { $( "input[type=text]" ).on( "focus", function() { $( this ).trigger( "blur" ); } ); - ]]> +]]> To focus on a login input box with id 'login' on page startup, try: @@ -84,7 +84,7 @@ $( "input[type=text]" ).on( "focus", function() { $( function() { $( "#login" ).trigger( "focus" ); } ); - ]]> +]]> diff --git a/entries/focusin.xml b/entries/focusin.xml index ead13090..5a453528 100644 --- a/entries/focusin.xml +++ b/entries/focusin.xml @@ -26,16 +26,16 @@ span { display: none; } - ]]> +]]> +]]> +]]> diff --git a/entries/focusout.xml b/entries/focusout.xml index 17f6af8d..26dc2290 100644 --- a/entries/focusout.xml +++ b/entries/focusout.xml @@ -31,7 +31,7 @@ .inputs p { margin-top: 0; } - ]]> +]]> +]]> +]]> From 35b481f6541a78dcca1d177a4de282c13b02f374 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Thu, 20 Apr 2023 02:13:16 +0200 Subject: [PATCH 09/33] hover: Deprecate the API --- entries/hover.xml | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/entries/hover.xml b/entries/hover.xml index 2ddab1fa..a924d368 100644 --- a/entries/hover.xml +++ b/entries/hover.xml @@ -1,7 +1,7 @@ Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. - + .hover() Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. @@ -16,12 +16,15 @@ +
+

This API is deprecated. Use .on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut ) instead.

+

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for:


-$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
+$( selector ).on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut );
       
-

See the discussions for .mouseenter() and .mouseleave() for more details.

+

See the discussions for mouseenter and mouseleave for more details.

To add a special style to list items that are being hovered over, try: @@ -80,8 +83,10 @@ $( "td" ).off( "mouseenter mouseleave" ); +
- + + Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements. 1.4 @@ -91,12 +96,15 @@ $( "td" ).off( "mouseenter mouseleave" ); +
+

This API is deprecated. Use .on( "mouseenter mouseleave", handlerInOut ) instead.

+

The .hover() method, when passed a single function, will execute that handler for both mouseenter and mouseleave events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the event.type.

Calling $(selector).hover(handlerInOut) is shorthand for:


 $( selector ).on( "mouseenter mouseleave", handlerInOut );
       
-

See the discussions for .mouseenter() and .mouseleave() for more details.

+

See the discussions for mouseenter and mouseleave for more details.

Slide the next sibling LI up or down on hover, and toggle a class. @@ -143,5 +151,6 @@ $( "li" ) +
From a23ab4403d4c77599b90ec88f44781ae6f0c1a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Thu, 20 Apr 2023 02:22:07 +0200 Subject: [PATCH 10/33] All: Add individual descriptions back --- entries/blur.xml | 2 ++ entries/focus.xml | 4 ++-- entries/focusin.xml | 4 +++- entries/focusout.xml | 4 +++- entries/resize-shorthand.xml | 37 ++++++++++++++++++++++++++++++++++++ 5 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 entries/resize-shorthand.xml diff --git a/entries/blur.xml b/entries/blur.xml index 56d6881c..3807f858 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -3,6 +3,7 @@ Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. blur event + Bind an event handler to the "blur" JavaScript event. 1.7 @@ -59,6 +60,7 @@ $( "p" ).trigger( "blur" ); blur event + Trigger the "blur" event on an element. 1.0 diff --git a/entries/focus.xml b/entries/focus.xml index 8ddb8c34..e1084c0a 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -3,6 +3,7 @@ Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. focus event + Bind an event handler to the "focus" JavaScript event. 1.7 @@ -89,12 +90,12 @@ $( function() { - focus event + Trigger the "focus" event on an element. 1.0 @@ -107,6 +108,5 @@ $( function() { - diff --git a/entries/focusin.xml b/entries/focusin.xml index 5a453528..c5cbfa75 100644 --- a/entries/focusin.xml +++ b/entries/focusin.xml @@ -1,8 +1,9 @@ - Bind an event handler to the "focusin" event. + Bind an event handler to the "focusin" event, or trigger that event on an element. focusin event + Bind an event handler to the "focusin" event. 1.7 @@ -46,6 +47,7 @@ $( "p" ).on( "focusin", function() { focusin event + Trigger the "focusin" event on an element. 1.0 diff --git a/entries/focusout.xml b/entries/focusout.xml index 26dc2290..9dbcfcb9 100644 --- a/entries/focusout.xml +++ b/entries/focusout.xml @@ -1,8 +1,9 @@ - Bind an event handler to the "focusout" JavaScript event. + Bind an event handler to the "focusout" event, or trigger that event on an element. focusout event + Bind an event handler to the "focusout" event. 1.7 @@ -68,6 +69,7 @@ $( "p" ) focusout event + Trigger the "focuout" event on an element. 1.0 diff --git a/entries/resize-shorthand.xml b/entries/resize-shorthand.xml new file mode 100644 index 00000000..c5b24ee3 --- /dev/null +++ b/entries/resize-shorthand.xml @@ -0,0 +1,37 @@ + + + .focusout() + Bind an event handler to the "focusout" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .focusout( handler ) or .focusout( eventData, handler ), use .on( "focusout", handler ) or .on( "focusout", eventData, handler ), respectively.

+

Instead of .focusout(), use .trigger( "focusout" ).

+
+
+ + + + + +
From 4f08883d099b58969635dabaf5fec53387906234 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Thu, 20 Apr 2023 02:22:58 +0200 Subject: [PATCH 11/33] resize: Deprecate the API --- entries/resize-shorthand.xml | 15 +++--- entries/resize.xml | 97 ++++++++++++++++++++---------------- 2 files changed, 61 insertions(+), 51 deletions(-) diff --git a/entries/resize-shorthand.xml b/entries/resize-shorthand.xml index c5b24ee3..ec93db64 100644 --- a/entries/resize-shorthand.xml +++ b/entries/resize-shorthand.xml @@ -1,7 +1,7 @@ - - .focusout() - Bind an event handler to the "focusout" JavaScript event, or trigger that event on an element. + + .resize() + Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. 1.0 @@ -25,13 +25,12 @@

This API is deprecated.

-

Instead of .focusout( handler ) or .focusout( eventData, handler ), use .on( "focusout", handler ) or .on( "focusout", eventData, handler ), respectively.

-

Instead of .focusout(), use .trigger( "focusout" ).

+

Instead of .resize( handler ) or .resize( eventData, handler ), use .on( "resize", handler ) or .on( "resize", eventData, handler ), respectively.

+

Instead of .resize(), use .trigger( "resize" ).

- - - + +
diff --git a/entries/resize.xml b/entries/resize.xml index 53b2a4cf..07cdcc32 100644 --- a/entries/resize.xml +++ b/entries/resize.xml @@ -1,47 +1,58 @@ - - .resize() + Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on('resize', handler) in the first and second variations, and .trigger( "resize" ) in the third.

-

The resize event is sent to the window element when the size of the browser window changes:

-

-$( window ).resize(function() {
-  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
-});
-    
-

Now whenever the browser window's size is changed, the message is appended to <div id="log"> one or more times, depending on the browser.

-

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

-
- - To see the window width while (or after) it is resized, try: - - - - - -
+ + + + +
+ + + resize event + Trigger the "resize" event on an element. + + 1.0 + + The string "resize". + + + +

See the description for .on( "resize", ... ).

+
+ + +
+
From 8905219fe1296a80af4b1c021297b19d56736225 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Fri, 21 Apr 2023 02:29:22 +0200 Subject: [PATCH 12/33] All: Deprecate scroll, click & dblclick; fix resize --- entries/click-shorthand.xml | 36 +++++++ entries/click.xml | 157 ++++++++++++++++--------------- entries/dblclick-shorthand.xml | 36 +++++++ entries/dblclick.xml | 165 ++++++++++++++++++--------------- entries/focusout.xml | 1 - entries/resize.xml | 2 +- entries/scroll-shorthand.xml | 36 +++++++ entries/scroll.xml | 139 ++++++++++++++------------- 8 files changed, 356 insertions(+), 216 deletions(-) create mode 100644 entries/click-shorthand.xml create mode 100644 entries/dblclick-shorthand.xml create mode 100644 entries/scroll-shorthand.xml diff --git a/entries/click-shorthand.xml b/entries/click-shorthand.xml new file mode 100644 index 00000000..91d7dfa0 --- /dev/null +++ b/entries/click-shorthand.xml @@ -0,0 +1,36 @@ + + + .click() + Bind an event handler to the "click" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .click( handler ) or .click( eventData, handler ), use .on( "click", handler ) or .on( "click", eventData, handler ), respectively.

+

Instead of .click(), use .trigger( "click" ).

+
+
+ + + + +
diff --git a/entries/click.xml b/entries/click.xml index b7207566..3b758172 100644 --- a/entries/click.xml +++ b/entries/click.xml @@ -1,75 +1,69 @@ - - .click() + Bind an event handler to the "click" JavaScript event, or trigger that event on an element. - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third. - The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. - For example, consider the HTML:

-

+  
+    click event
+    Bind an event handler to the "click" JavaScript event.
+    
+      1.7
+      
+        The string "click".
+      
+      
+        An object containing data that will be passed to the event handler.
+      
+      
+        A function to execute each time the event is triggered.
+        
+      
+    
+    
+      

The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. + For example, consider the HTML:

+

 <div id="target">
   Click here
 </div>
 <div id="other">
   Trigger the handler
 </div>
-    
-
- -
Figure 1 - Illustration of the rendered HTML
-
-

The event handler can be bound to any <div>:

-

-$( "#target" ).click(function() {
-  alert( "Handler for .click() called." );
-});
-    
-

Now if we click on this element, the alert is displayed:

-

- Handler for .click() called. -

-

We can also trigger the event when a different element is clicked:

-

-$( "#other" ).click(function() {
-  $( "#target" ).click();
-});
-    
-

After this code executes, clicking on Trigger the handler will also alert the message.

-

The click event is only triggered after this exact series of events:

-
    -
  • The mouse button is depressed while the pointer is inside the element.
  • -
  • The mouse button is released while the pointer is inside the element.
  • -
-

This is usually the desired sequence before taking an action. If this is not required, the mousedown or mouseup event may be more suitable.

-
- - Hide paragraphs on a page when they are clicked: - - - - - - Trigger the click event on all of the paragraphs on the page: - - - - - -
+ + + + + + + + click event + Trigger the "click" event on an element. + + 1.0 + + The string "click". + + + +

See the description for .on( "click", ... ).

+
+ + +
+ diff --git a/entries/dblclick-shorthand.xml b/entries/dblclick-shorthand.xml new file mode 100644 index 00000000..03ff7dde --- /dev/null +++ b/entries/dblclick-shorthand.xml @@ -0,0 +1,36 @@ + + + .dblclick() + Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .dblclick( handler ) or .dblclick( eventData, handler ), use .on( "dblclick", handler ) or .on( "dblclick", eventData, handler ), respectively.

+

Instead of .dblclick(), use .trigger( "dblclick" ).

+
+
+ + + + +
diff --git a/entries/dblclick.xml b/entries/dblclick.xml index b9cef0ce..298c195d 100644 --- a/entries/dblclick.xml +++ b/entries/dblclick.xml @@ -1,87 +1,81 @@ - - .dblclick() + Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on( "dblclick", handler ) in the first two variations, and .trigger( "dblclick" ) in the third. - The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. - For example, consider the HTML:

-

+  
+    dblclick event
+    Bind an event handler to the "dblclick" JavaScript event.
+    
+      1.7
+      
+        The string "dblclick".
+      
+      
+        An object containing data that will be passed to the event handler.
+      
+      
+        A function to execute each time the event is triggered.
+        
+      
+    
+    
+      

The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. + For example, consider the HTML:

+

 <div id="target">
   Double-click here
 </div>
 <div id="other">
   Trigger the handler
 </div>
-    
-
- -
Figure 1 - Illustration of the rendered HTML
-
-

The event handler can be bound to any <div>:

-

-$( "#target" ).dblclick(function() {
-  alert( "Handler for .dblclick() called." );
-});
-    
-

Now double-clicking on this element displays the alert:

-

- Handler for .dblclick() called. -

-

To trigger the event manually, call .dblclick() without an argument:

-

-$( "#other" ).click(function() {
-  $( "#target" ).dblclick();
-});
-    
-

After this code executes, (single) clicks on Trigger the handler will also alert the message.

-

The dblclick event is only triggered after this exact series of events:

-
    -
  • The mouse button is depressed while the pointer is inside the element.
  • -
  • The mouse button is released while the pointer is inside the element.
  • -
  • The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.
  • -
  • The mouse button is released while the pointer is inside the element.
  • -
-

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable. -

-
- - To bind a "Hello World!" alert box to the dblclick event on every paragraph on the page: - - - - Double click to toggle background color. - - - - - - - -
+ + + + + + + + dblclick event + Trigger the "dblclick" event on an element. + + 1.0 + + The string "dblclick". + + + +

See the description for .on( "dblclick", ... ).

+
+ + +
+ diff --git a/entries/focusout.xml b/entries/focusout.xml index 9dbcfcb9..a951eb27 100644 --- a/entries/focusout.xml +++ b/entries/focusout.xml @@ -18,7 +18,6 @@ -

This method is a shortcut for .on( "focusout", handler ) when passed arguments, and .trigger( "focusout" ) when no arguments are passed.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

This event will likely be used together with the focusin event.

diff --git a/entries/resize.xml b/entries/resize.xml index 07cdcc32..61d7de35 100644 --- a/entries/resize.xml +++ b/entries/resize.xml @@ -30,7 +30,7 @@ $( window ).on( "resize", function() { To see the window width while (or after) it is resized, try: diff --git a/entries/scroll-shorthand.xml b/entries/scroll-shorthand.xml new file mode 100644 index 00000000..595e61fb --- /dev/null +++ b/entries/scroll-shorthand.xml @@ -0,0 +1,36 @@ + + + .scroll() + Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .scroll( handler ) or .scroll( eventData, handler ), use .on( "scroll", handler ) or .on( "scroll", eventData, handler ), respectively.

+

Instead of .scroll(), use .trigger( "scroll" ).

+
+
+ + + + +
diff --git a/entries/scroll.xml b/entries/scroll.xml index a695991e..0d6d8689 100644 --- a/entries/scroll.xml +++ b/entries/scroll.xml @@ -1,32 +1,26 @@ - - .scroll() + Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element. - - 1.0 - - A function to execute each time the event is triggered. - - - - - 1.4.3 - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - - 1.0 - - -

This method is a shortcut for .on( "scroll", handler ) in the first and second variations, and .trigger( "scroll" ) in the third.

-

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

-

For example, consider the HTML:

-

+  
+    scroll event
+    Bind an event handler to the "scroll" JavaScript event.
+    
+      1.7
+      
+        The string "scroll".
+      
+      
+        An object containing data that will be passed to the event handler.
+      
+      
+        A function to execute each time the event is triggered.
+        
+      
+    
+    
+      

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

+

For example, consider the HTML:

+

 <div id="target" style="overflow: scroll; width: 200px; height: 100px;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
@@ -41,42 +35,42 @@
   Trigger the handler
 </div>
 <div id="log"></div>
-
-

The style definition is present to make the target element small enough to be scrollable:

-
- -
Figure 1 - Illustration of the rendered HTML
-
-

The scroll event handler can be bound to this element:

-

-$( "#target" ).scroll(function() {
-  $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
-});
-    
-

Now when the user scrolls the text up or down, one or more messages are appended to <div id="log"></div>:

-

- Handler for .scroll() called. -

-

To trigger the event manually, apply .scroll() without an argument:

-

-$( "#other" ).click(function() {
-  $( "#target" ).scroll();
-});
-    
-

After this code executes, clicks on Trigger the handler will also append the message.

-

A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.

-
- - To do something when your page is scrolled: - - - - - - - -
+ + + + + + + + scroll event + Trigger the "scroll" event on an element. + + 1.0 + + The string "scroll". + + + +

See the description for .on( "scroll", ... ).

+
+ + +
+ From a270b7a79745e337c7ed0976f0b198add3b8bc56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Fri, 21 Apr 2023 23:15:25 +0200 Subject: [PATCH 13/33] All: De-indent entries on event pages for better Git history --- entries/ajaxStart.xml | 130 +++++++++++++++++----------------- entries/blur.xml | 120 ++++++++++++++++---------------- entries/click.xml | 148 ++++++++++++++++++++------------------- entries/dblclick.xml | 154 ++++++++++++++++++++-------------------- entries/focus.xml | 158 +++++++++++++++++++++--------------------- entries/focusin.xml | 102 ++++++++++++++------------- entries/focusout.xml | 102 ++++++++++++++------------- entries/resize.xml | 96 ++++++++++++------------- entries/scroll.xml | 132 ++++++++++++++++++----------------- 9 files changed, 581 insertions(+), 561 deletions(-) diff --git a/entries/ajaxStart.xml b/entries/ajaxStart.xml index 897dc182..45834d25 100644 --- a/entries/ajaxStart.xml +++ b/entries/ajaxStart.xml @@ -1,68 +1,70 @@ - Register a handler to be called when the first Ajax request begins. This is an Ajax Event. - - ajaxStart event - - 1.7 - - The string "ajaxStart". - - - The function to be invoked. - - - -

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.

-

To observe this method in action, set up a basic Ajax load request:

-

-  <div class="trigger">Trigger</div>
-  <div class="result"></div>
-  <div class="log"></div>
-      
-

Attach the event handler to any element:

-

-  $( document ).on( "ajaxStart", function() {
-    $( ".log" ).text( "Triggered ajaxStart handler." );
-  } );
-      
-

Now, make an Ajax request using any jQuery method:

-

-  $( ".trigger" ).on( "click", function() {
-    $( ".result" ).load( "ajax/test.html" );
-  } );
-      
-

When the user clicks the element with class trigger and the Ajax request is sent, the log message is displayed.

-
- - - - Show a loading message whenever an Ajax request starts (and none is already active). - - - - -
- - .ajaxStart() - - 1.0 - - The function to be invoked. - - - -
-

This API is deprecated. Use .on( "ajaxStart", handler ) instead.

-
-
- - - -
+Register a handler to be called when the first Ajax request begins. This is an Ajax Event. + + ajaxStart event + + 1.7 + + The string "ajaxStart". + + + The function to be invoked. + + + +

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.

+

To observe this method in action, set up a basic Ajax load request:

+

+<div class="trigger">Trigger</div>
+<div class="result"></div>
+<div class="log"></div>
+    
+

Attach the event handler to any element:

+

+$( document ).on( "ajaxStart", function() {
+  $( ".log" ).text( "Triggered ajaxStart handler." );
+} );
+    
+

Now, make an Ajax request using any jQuery method:

+

+$( ".trigger" ).on( "click", function() {
+  $( ".result" ).load( "ajax/test.html" );
+} );
+    
+

When the user clicks the element with class trigger and the Ajax request is sent, the log message is displayed.

+
+ + + + Show a loading message whenever an Ajax request starts (and none is already active). + + + + +
+ + + .ajaxStart() + + 1.0 + + The function to be invoked. + + + +
+

This API is deprecated. Use .on( "ajaxStart", handler ) instead.

+
+
+ + + +
+
diff --git a/entries/blur.xml b/entries/blur.xml index 3807f858..13663dd1 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -1,26 +1,27 @@ - Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. - - blur event - Bind an event handler to the "blur" JavaScript event. - - 1.7 - - The string "blur". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

-

For example, consider the HTML:

-

+
+Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
+
+  blur event
+  Bind an event handler to the "blur" JavaScript event.
+  
+    1.7
+    
+      The string "blur".
+    
+    
+      An object containing data that will be passed to the event handler.
+    
+    
+      A function to execute each time the event is triggered.
+      
+    
+  
+  
+    

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

+

For example, consider the HTML:

+

 <form>
   <input id="target" type="text" value="Field 1">
   <input type="text" value="Field 2">
@@ -28,50 +29,53 @@
 <div id="other">
   Trigger the handler
 </div>
-The event handler can be bound to the first input field:
+    
+

The event handler can be bound to the first input field:

+

 $( "#target" ).on( "blur", function() {
   alert( "Handler for `blur` called." );
 } );
-      
-

Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

-

- Handler for `blur` called. -

-

To trigger the event programmatically, call .trigger( "blur" ):

-

+    
+

Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

+

+ Handler for `blur` called. +

+

To trigger the event programmatically, call .trigger( "blur" ):

+

 $( "#other" ).on( "click", function() {
   $( "#target" ).trigger( "blur" );
 } );
-      
-

After this code executes, clicks on Trigger the handler will also alert the message.

-

The blur event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods.

-
- - To trigger the blur event on all paragraphs: - - - - - - -
+ + + + + + + + + blur event + Trigger the "blur" event on an element. + + 1.0 + + The string "blur". + + + +

See the description for .on( "blur", ... ).

+
+ + + +
- - blur event - Trigger the "blur" event on an element. - - 1.0 - - The string "blur". - - - -

See the description for .on( "blur", ... ).

-
- - - -
diff --git a/entries/click.xml b/entries/click.xml index 3b758172..75c58e83 100644 --- a/entries/click.xml +++ b/entries/click.xml @@ -1,69 +1,70 @@ - Bind an event handler to the "click" JavaScript event, or trigger that event on an element. - - click event - Bind an event handler to the "click" JavaScript event. - - 1.7 - - The string "click". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. - For example, consider the HTML:

-

+
+Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
+
+  click event
+  Bind an event handler to the "click" JavaScript event.
+  
+    1.7
+    
+      The string "click".
+    
+    
+      An object containing data that will be passed to the event handler.
+    
+    
+      A function to execute each time the event is triggered.
+      
+    
+  
+  
+    

The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. + For example, consider the HTML:

+

 <div id="target">
   Click here
 </div>
 <div id="other">
   Trigger the handler
 </div>
-      
-
- -
Figure 1 - Illustration of the rendered HTML
-
-

The event handler can be bound to any <div>:

-

+    
+
+ +
Figure 1 - Illustration of the rendered HTML
+
+

The event handler can be bound to any <div>:

+

 $( "#target" ).on( "click", function() {
   alert( "Handler for `click` called." );
 } );
-      
-

Now if we click on this element, the alert is displayed:

-

- Handler for `click` called. -

-

We can also trigger the event when a different element is clicked:

-

+    
+

Now if we click on this element, the alert is displayed:

+

+ Handler for `click` called. +

+

We can also trigger the event when a different element is clicked:

+

 $( "#other" ).on( "click", function() {
   $( "#target" ).trigger( "click" );
 } );
-      
-

After this code executes, clicking on Trigger the handler will also alert the message.

-

The click event is only triggered after this exact series of events:

-
    -
  • The mouse button is depressed while the pointer is inside the element.
  • -
  • The mouse button is released while the pointer is inside the element.
  • -
-

This is usually the desired sequence before taking an action. If this is not required, the mousedown or mouseup event may be more suitable.

-
- - Hide paragraphs on a page when they are clicked: - - - - - - Trigger the click event on all the paragraphs on the page: - - - - - -
+ + + + + + + + click event + Trigger the "click" event on an element. + + 1.0 + + The string "click". + + + +

See the description for .on( "click", ... ).

+
+ + +
- - click event - Trigger the "click" event on an element. - - 1.0 - - The string "click". - - - -

See the description for .on( "click", ... ).

-
- - -
diff --git a/entries/dblclick.xml b/entries/dblclick.xml index 298c195d..f0118d21 100644 --- a/entries/dblclick.xml +++ b/entries/dblclick.xml @@ -1,81 +1,82 @@ - Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. - - dblclick event - Bind an event handler to the "dblclick" JavaScript event. - - 1.7 - - The string "dblclick". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. - For example, consider the HTML:

-

+
+Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
+
+  dblclick event
+  Bind an event handler to the "dblclick" JavaScript event.
+  
+    1.7
+    
+      The string "dblclick".
+    
+    
+      An object containing data that will be passed to the event handler.
+    
+    
+      A function to execute each time the event is triggered.
+      
+    
+  
+  
+    

The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. + For example, consider the HTML:

+

 <div id="target">
   Double-click here
 </div>
 <div id="other">
   Trigger the handler
 </div>
-      
-
- -
Figure 1 - Illustration of the rendered HTML
-
-

The event handler can be bound to any <div>:

-

+    
+
+ +
Figure 1 - Illustration of the rendered HTML
+
+

The event handler can be bound to any <div>:

+

 $( "#target" ).on( "dblclick", function() {
   alert( "Handler for `dblclick` called." );
 } );
-      
-

Now double-clicking on this element displays the alert:

-

- Handler for `dblclick` called. -

-

To trigger the event manually, call .trigger( "dblclick" ):

-

+    
+

Now double-clicking on this element displays the alert:

+

+ Handler for `dblclick` called. +

+

To trigger the event manually, call .trigger( "dblclick" ):

+

 $( "#other" ).on( "click", function() {
   $( "#target" ).trigger( "dblclick" );
 } );
-      
-

After this code executes, (single) clicks on Trigger the handler will also alert the message.

-

The dblclick event is only triggered after this exact series of events:

-
    -
  • The mouse button is depressed while the pointer is inside the element.
  • -
  • The mouse button is released while the pointer is inside the element.
  • -
  • The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.
  • -
  • The mouse button is released while the pointer is inside the element.
  • -
-

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable. -

-
- - To bind a "Hello World!" alert box to the dblclick event on every paragraph on the page: - - - - Double click to toggle background color. - - - - - - - -
+ + + + + + + + dblclick event + Trigger the "dblclick" event on an element. + + 1.0 + + The string "dblclick". + + + +

See the description for .on( "dblclick", ... ).

+
+ + +
- - dblclick event - Trigger the "dblclick" event on an element. - - 1.0 - - The string "dblclick". - - - -

See the description for .on( "dblclick", ... ).

-
- - -
diff --git a/entries/focus.xml b/entries/focus.xml index e1084c0a..1694be68 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -1,32 +1,33 @@ - Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. - - focus event - Bind an event handler to the "focus" JavaScript event. - - 1.7 - - The string "focus". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -
    -
  • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
  • -
  • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.
  • -
-
-

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .trigger( "focus" ) on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .trigger( "focus" ).

-
-

For example, consider the HTML:

-

+
+Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
+
+  focus event
+  Bind an event handler to the "focus" JavaScript event.
+  
+    1.7
+    
+      The string "focus".
+    
+    
+      An object containing data that will be passed to the event handler.
+    
+    
+      A function to execute each time the event is triggered.
+      
+    
+  
+  
+    
    +
  • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
  • +
  • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.
  • +
+
+

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .trigger( "focus" ) on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .trigger( "focus" ).

+
+

For example, consider the HTML:

+

 <form>
   <input id="target" type="text" value="Field 1">
   <input type="text" value="Field 2">
@@ -34,79 +35,80 @@
 <div id="other">
   Trigger the handler
 </div>
-      
-

The event handler can be bound to the first input field:

-

+    
+

The event handler can be bound to the first input field:

+

 $( "#target" ).on( "focus", function() {
   alert( "Handler for `focus` called." );
 } );
-      
-

Now clicking on the first field, or tabbing to it from another field, displays the alert:

-

- Handler for `focus` called. -

-

We can trigger the event when another element is clicked:

-

+    
+

Now clicking on the first field, or tabbing to it from another field, displays the alert:

+

+ Handler for `focus` called. +

+

We can trigger the event when another element is clicked:

+

 $( "#other" ).on( "click", function() {
   $( "#target" ).trigger( "focus" );
 } );
-      
-

After this code executes, clicks on Trigger the handler will also alert the message.

-

The focus event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods.

-
- - Fire focus. - - - - - - To stop people from writing in text input boxes, try: - - - - To focus on a login input box with id 'login' on page startup, try: - - - - - - -
+ + + + + + + + + focus event + Trigger the "focus" event on an element. + + 1.0 + + The string "focus". + + + +

See the description for .on( "focus", ... ).

+
+ + + +
- - focus event - Trigger the "focus" event on an element. - - 1.0 - - The string "focus". - - - -

See the description for .on( "focus", ... ).

-
- - - -
diff --git a/entries/focusin.xml b/entries/focusin.xml index c5cbfa75..cb090ba7 100644 --- a/entries/focusin.xml +++ b/entries/focusin.xml @@ -1,65 +1,67 @@ - Bind an event handler to the "focusin" event, or trigger that event on an element. - - focusin event - Bind an event handler to the "focusin" event. - - 1.7 - - The string "focusin". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

-

This event will likely be used together with the focusout event.

-
- - Watch for a focus to occur within the paragraphs on the page. - - - - - - - - - -
+ + + + + + + + + + focusin event + Trigger the "focusin" event on an element. + + 1.0 + + The string "focusin". + + + +

See the description for .on( "focusin", ... ).

+
+ + + + +
- - focusin event - Trigger the "focusin" event on an element. - - 1.0 - - The string "focusin". - - - -

See the description for .on( "focusin", ... ).

-
- - - - -
diff --git a/entries/focusout.xml b/entries/focusout.xml index a951eb27..0aab1c69 100644 --- a/entries/focusout.xml +++ b/entries/focusout.xml @@ -1,29 +1,30 @@ - Bind an event handler to the "focusout" event, or trigger that event on an element. - - focusout event - Bind an event handler to the "focusout" event. - - 1.7 - - The string "focusout". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

-

This event will likely be used together with the focusin event.

-
- - Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count. (The blur count does not change because those events do not bubble.) - - - - - - - - - -
+ + + + + + + + + + focusout event + Trigger the "focuout" event on an element. + + 1.0 + + The string "focusout". + + + +

See the description for .on( "focusout", ... ).

+
+ + + + +
- - focusout event - Trigger the "focuout" event on an element. - - 1.0 - - The string "focusout". - - - -

See the description for .on( "focusout", ... ).

-
- - - - -
diff --git a/entries/resize.xml b/entries/resize.xml index 61d7de35..6bb29a97 100644 --- a/entries/resize.xml +++ b/entries/resize.xml @@ -1,58 +1,60 @@ - Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. - - resize event - Bind an event handler to the "resize" JavaScript event. - - 1.7 - - The string "resize". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The resize event is sent to the window element when the size of the browser window changes:

-

+
+Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.
+
+  resize event
+  Bind an event handler to the "resize" JavaScript event.
+  
+    1.7
+    
+      The string "resize".
+    
+    
+      An object containing data that will be passed to the event handler.
+    
+    
+      A function to execute each time the event is triggered.
+      
+    
+  
+  
+    

The resize event is sent to the window element when the size of the browser window changes:

+

 $( window ).on( "resize", function() {
   $( "#log" ).append( "<div>Handler for `resize` called.</div>" );
 } );
-      
-

Now whenever the browser window's size is changed, the message is appended to <div id="log"> one or more times, depending on the browser.

-

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

-
- - To see the window width while (or after) it is resized, try: - - - - - -
+ + + + + + + + resize event + Trigger the "resize" event on an element. + + 1.0 + + The string "resize". + + + +

See the description for .on( "resize", ... ).

+
+ + +
- - resize event - Trigger the "resize" event on an element. - - 1.0 - - The string "resize". - - - -

See the description for .on( "resize", ... ).

-
- - -
diff --git a/entries/scroll.xml b/entries/scroll.xml index 0d6d8689..498e4aab 100644 --- a/entries/scroll.xml +++ b/entries/scroll.xml @@ -1,26 +1,27 @@ - Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element. - - scroll event - Bind an event handler to the "scroll" JavaScript event. - - 1.7 - - The string "scroll". - - - An object containing data that will be passed to the event handler. - - - A function to execute each time the event is triggered. - - - - -

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

-

For example, consider the HTML:

-

+
+Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.
+
+  scroll event
+  Bind an event handler to the "scroll" JavaScript event.
+  
+    1.7
+    
+      The string "scroll".
+    
+    
+      An object containing data that will be passed to the event handler.
+    
+    
+      A function to execute each time the event is triggered.
+      
+    
+  
+  
+    

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

+

For example, consider the HTML:

+

 <div id="target" style="overflow: scroll; width: 200px; height: 100px;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
@@ -35,34 +36,34 @@
   Trigger the handler
 </div>
 <div id="log"></div>
-  
-

The style definition is present to make the target element small enough to be scrollable:

-
- -
Figure 1 - Illustration of the rendered HTML
-
-

The scroll event handler can be bound to this element:

-

+    
+

The style definition is present to make the target element small enough to be scrollable:

+
+ +
Figure 1 - Illustration of the rendered HTML
+
+

The scroll event handler can be bound to this element:

+

 $( "#target" ).on( "scroll", function() {
   $( "#log" ).append( "<div>Handler for `scroll` called.</div>" );
 } );
-      
-

Now when the user scrolls the text up or down, one or more messages are appended to <div id="log"></div>:

-

- Handler for `scroll` called. -

-

To trigger the event manually, use .trigger( "scroll" ):

-

+    
+

Now when the user scrolls the text up or down, one or more messages are appended to <div id="log"></div>:

+

+ Handler for `scroll` called. +

+

To trigger the event manually, use .trigger( "scroll" ):

+

 $( "#other" ).on( "click", function() {
   $( "#target" ).trigger( "scroll" );
 } );
-      
-

After this code executes, clicks on Trigger the handler will also append the message.

-

A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.

-
- - To do something when your page is scrolled: - - - - - - - -
+ + + + + + + + scroll event + Trigger the "scroll" event on an element. + + 1.0 + + The string "scroll". + + + +

See the description for .on( "scroll", ... ).

+
+ + +
- - scroll event - Trigger the "scroll" event on an element. - - 1.0 - - The string "scroll". - - - -

See the description for .on( "scroll", ... ).

-
- - -
From f4b077ba8d54cc5e3c4ec9dbef6967fac8a31ef1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Fri, 21 Apr 2023 23:21:00 +0200 Subject: [PATCH 14/33] ajaxStart: separate the deprecated page --- entries/ajaxStart-shorthand.xml | 18 ++++++++++++++++++ entries/ajaxStart.xml | 26 +++----------------------- 2 files changed, 21 insertions(+), 23 deletions(-) create mode 100644 entries/ajaxStart-shorthand.xml diff --git a/entries/ajaxStart-shorthand.xml b/entries/ajaxStart-shorthand.xml new file mode 100644 index 00000000..fa46a0e5 --- /dev/null +++ b/entries/ajaxStart-shorthand.xml @@ -0,0 +1,18 @@ + + + .ajaxStart() + + 1.0 + + The function to be invoked. + + + +
+

This API is deprecated. Use .on( "ajaxStart", handler ) instead.

+
+
+ + + +
diff --git a/entries/ajaxStart.xml b/entries/ajaxStart.xml index 45834d25..678d7dac 100644 --- a/entries/ajaxStart.xml +++ b/entries/ajaxStart.xml @@ -1,9 +1,7 @@ - - -Register a handler to be called when the first Ajax request begins. This is an Ajax Event. ajaxStart event + Register a handler to be called when the first Ajax request begins. This is an Ajax Event. 1.7 @@ -13,6 +11,7 @@ The function to be invoked. + Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.

To observe this method in action, set up a basic Ajax load request:

@@ -47,24 +46,5 @@ $( document ).on( "ajaxStart", function() { +
- - - .ajaxStart() - - 1.0 - - The function to be invoked. - - - -
-

This API is deprecated. Use .on( "ajaxStart", handler ) instead.

-
-
- - - -
- -
From 611f3c7ccde8d934ae77f0c06901af83fd9388fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Fri, 21 Apr 2023 23:23:18 +0200 Subject: [PATCH 15/33] All: Move descriptions in Ajax event pages up --- entries/ajaxComplete.xml | 2 +- entries/ajaxError.xml | 2 +- entries/ajaxSend.xml | 2 +- entries/ajaxStart.xml | 1 - entries/ajaxSuccess.xml | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/entries/ajaxComplete.xml b/entries/ajaxComplete.xml index 190c4e96..ba400e71 100644 --- a/entries/ajaxComplete.xml +++ b/entries/ajaxComplete.xml @@ -1,6 +1,7 @@ .ajaxComplete() + Register a handler to be called when Ajax requests complete. This is an AjaxEvent. 1.0 @@ -10,7 +11,6 @@ The function to be invoked. - Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

To observe this method in action, set up a basic Ajax load request:

diff --git a/entries/ajaxError.xml b/entries/ajaxError.xml index ef3e5009..55ab65c8 100644 --- a/entries/ajaxError.xml +++ b/entries/ajaxError.xml @@ -1,6 +1,7 @@ .ajaxError() + Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. 1.0 @@ -11,7 +12,6 @@ - Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

To observe this method in action, set up a basic Ajax load request.

diff --git a/entries/ajaxSend.xml b/entries/ajaxSend.xml index 7ba51cf4..b4f7f9cd 100644 --- a/entries/ajaxSend.xml +++ b/entries/ajaxSend.xml @@ -1,6 +1,7 @@ .ajaxSend() + Attach a function to be executed before an Ajax request is sent. This is an Ajax Event. 1.0 @@ -10,7 +11,6 @@ - Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time.

To observe this method in action, set up a basic Ajax load request:

diff --git a/entries/ajaxStart.xml b/entries/ajaxStart.xml index 678d7dac..991f992a 100644 --- a/entries/ajaxStart.xml +++ b/entries/ajaxStart.xml @@ -11,7 +11,6 @@ The function to be invoked. - Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.

To observe this method in action, set up a basic Ajax load request:

diff --git a/entries/ajaxSuccess.xml b/entries/ajaxSuccess.xml index 235c339e..76210e77 100644 --- a/entries/ajaxSuccess.xml +++ b/entries/ajaxSuccess.xml @@ -1,6 +1,7 @@ .ajaxSuccess() + Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event. 1.0 @@ -11,7 +12,6 @@ - Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

To observe this method in action, set up a basic Ajax load request:

From 47c6e85a487e1e86ee693f638f6f158ec16e9dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Fri, 21 Apr 2023 23:32:21 +0200 Subject: [PATCH 16/33] All: JavaScript event -> event --- entries/blur-shorthand.xml | 2 +- entries/blur.xml | 4 ++-- entries/change.xml | 2 +- entries/click-shorthand.xml | 2 +- entries/click.xml | 4 ++-- entries/contextmenu.xml | 2 +- entries/dblclick-shorthand.xml | 2 +- entries/dblclick.xml | 4 ++-- entries/error.xml | 2 +- entries/focus-shorthand.xml | 2 +- entries/focus.xml | 4 ++-- entries/focusin-shorthand.xml | 2 +- entries/focusout-shorthand.xml | 2 +- entries/keydown.xml | 2 +- entries/keypress.xml | 2 +- entries/keyup.xml | 2 +- entries/load-event.xml | 2 +- entries/mousedown.xml | 2 +- entries/mousemove.xml | 2 +- entries/mouseout.xml | 2 +- entries/mouseover.xml | 2 +- entries/mouseup.xml | 2 +- entries/resize-shorthand.xml | 2 +- entries/resize.xml | 4 ++-- entries/scroll-shorthand.xml | 2 +- entries/scroll.xml | 4 ++-- entries/select.xml | 2 +- entries/submit.xml | 2 +- entries/unload.xml | 2 +- 29 files changed, 35 insertions(+), 35 deletions(-) diff --git a/entries/blur-shorthand.xml b/entries/blur-shorthand.xml index 650069e2..589a1ceb 100644 --- a/entries/blur-shorthand.xml +++ b/entries/blur-shorthand.xml @@ -1,7 +1,7 @@ .blur() - Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. + Bind an event handler to the "blur" event, or trigger that event on an element. 1.0 diff --git a/entries/blur.xml b/entries/blur.xml index 13663dd1..cdf09e35 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -1,10 +1,10 @@ -Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. +Bind an event handler to the "blur" event, or trigger that event on an element. blur event - Bind an event handler to the "blur" JavaScript event. + Bind an event handler to the "blur" event. 1.7 diff --git a/entries/change.xml b/entries/change.xml index 97a9b5e7..0ff55558 100644 --- a/entries/change.xml +++ b/entries/change.xml @@ -1,7 +1,7 @@ .change() - Bind an event handler to the "change" JavaScript event, or trigger that event on an element. + Bind an event handler to the "change" event, or trigger that event on an element. 1.0 diff --git a/entries/click-shorthand.xml b/entries/click-shorthand.xml index 91d7dfa0..374e9f74 100644 --- a/entries/click-shorthand.xml +++ b/entries/click-shorthand.xml @@ -1,7 +1,7 @@ .click() - Bind an event handler to the "click" JavaScript event, or trigger that event on an element. + Bind an event handler to the "click" event, or trigger that event on an element. 1.0 diff --git a/entries/click.xml b/entries/click.xml index 75c58e83..51618f39 100644 --- a/entries/click.xml +++ b/entries/click.xml @@ -1,10 +1,10 @@ -Bind an event handler to the "click" JavaScript event, or trigger that event on an element. +Bind an event handler to the "click" event, or trigger that event on an element. click event - Bind an event handler to the "click" JavaScript event. + Bind an event handler to the "click" event. 1.7 diff --git a/entries/contextmenu.xml b/entries/contextmenu.xml index 77c069f8..fd8f2205 100644 --- a/entries/contextmenu.xml +++ b/entries/contextmenu.xml @@ -1,7 +1,7 @@ .contextmenu() - Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element. + Bind an event handler to the "contextmenu" event, or trigger that event on an element. 1.0 diff --git a/entries/dblclick-shorthand.xml b/entries/dblclick-shorthand.xml index 03ff7dde..ad4c1887 100644 --- a/entries/dblclick-shorthand.xml +++ b/entries/dblclick-shorthand.xml @@ -1,7 +1,7 @@ .dblclick() - Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. + Bind an event handler to the "dblclick" event, or trigger that event on an element. 1.0 diff --git a/entries/dblclick.xml b/entries/dblclick.xml index f0118d21..629ad4fe 100644 --- a/entries/dblclick.xml +++ b/entries/dblclick.xml @@ -1,10 +1,10 @@ -Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. +Bind an event handler to the "dblclick" event, or trigger that event on an element. dblclick event - Bind an event handler to the "dblclick" JavaScript event. + Bind an event handler to the "dblclick" event. 1.7 diff --git a/entries/error.xml b/entries/error.xml index a2e3a40b..f76d4d1d 100644 --- a/entries/error.xml +++ b/entries/error.xml @@ -1,7 +1,7 @@ .error() - Bind an event handler to the "error" JavaScript event. + Bind an event handler to the "error" event. 1.0 diff --git a/entries/focus-shorthand.xml b/entries/focus-shorthand.xml index 0ec654de..a38f4c28 100644 --- a/entries/focus-shorthand.xml +++ b/entries/focus-shorthand.xml @@ -1,7 +1,7 @@ .focus() - Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. + Bind an event handler to the "focus" event, or trigger that event on an element. 1.0 diff --git a/entries/focus.xml b/entries/focus.xml index 1694be68..df7b479d 100644 --- a/entries/focus.xml +++ b/entries/focus.xml @@ -1,10 +1,10 @@ -Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. +Bind an event handler to the "focus" event, or trigger that event on an element. focus event - Bind an event handler to the "focus" JavaScript event. + Bind an event handler to the "focus" event. 1.7 diff --git a/entries/focusin-shorthand.xml b/entries/focusin-shorthand.xml index 61203709..ff8f548e 100644 --- a/entries/focusin-shorthand.xml +++ b/entries/focusin-shorthand.xml @@ -1,7 +1,7 @@ .focusin() - Bind an event handler to the "focusin" JavaScript event, or trigger that event on an element. + Bind an event handler to the "focusin" event, or trigger that event on an element. 1.0 diff --git a/entries/focusout-shorthand.xml b/entries/focusout-shorthand.xml index c5b24ee3..6114a08b 100644 --- a/entries/focusout-shorthand.xml +++ b/entries/focusout-shorthand.xml @@ -1,7 +1,7 @@ .focusout() - Bind an event handler to the "focusout" JavaScript event, or trigger that event on an element. + Bind an event handler to the "focusout" event, or trigger that event on an element. 1.0 diff --git a/entries/keydown.xml b/entries/keydown.xml index a4c531f7..ac2a678f 100644 --- a/entries/keydown.xml +++ b/entries/keydown.xml @@ -21,7 +21,7 @@ 1.0 - Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element. + Bind an event handler to the "keydown" event, or trigger that event on an element.

This method is a shortcut for .on( "keydown", handler ) in the first and second variations, and .trigger( "keydown" ) in the third.

The keydown event is sent to an element when the user presses a key on the keyboard. If the key is kept pressed, the event is sent every time the operating system repeats the key. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

diff --git a/entries/keypress.xml b/entries/keypress.xml index 0f963f5f..e5f97df9 100644 --- a/entries/keypress.xml +++ b/entries/keypress.xml @@ -1,7 +1,7 @@ .keypress() - Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element. + Bind an event handler to the "keypress" event, or trigger that event on an element. 1.0 diff --git a/entries/keyup.xml b/entries/keyup.xml index 2d523041..b5a3b5ff 100644 --- a/entries/keyup.xml +++ b/entries/keyup.xml @@ -1,7 +1,7 @@ .keyup() - Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element. + Bind an event handler to the "keyup" event, or trigger that event on an element. 1.0 diff --git a/entries/load-event.xml b/entries/load-event.xml index b9669cc6..d9be6d90 100644 --- a/entries/load-event.xml +++ b/entries/load-event.xml @@ -1,7 +1,7 @@ .load() - Bind an event handler to the "load" JavaScript event. + Bind an event handler to the "load" event. 1.0 diff --git a/entries/mousedown.xml b/entries/mousedown.xml index d94d3ca3..b0aa57bd 100644 --- a/entries/mousedown.xml +++ b/entries/mousedown.xml @@ -1,7 +1,7 @@ .mousedown() - Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element. + Bind an event handler to the "mousedown" event, or trigger that event on an element. 1.0 diff --git a/entries/mousemove.xml b/entries/mousemove.xml index dae04342..730902ea 100644 --- a/entries/mousemove.xml +++ b/entries/mousemove.xml @@ -1,7 +1,7 @@ .mousemove() - Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element. + Bind an event handler to the "mousemove" event, or trigger that event on an element. 1.0 diff --git a/entries/mouseout.xml b/entries/mouseout.xml index 3ff3e32e..bc1d606d 100644 --- a/entries/mouseout.xml +++ b/entries/mouseout.xml @@ -1,7 +1,7 @@ .mouseout() - Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element. + Bind an event handler to the "mouseout" event, or trigger that event on an element. 1.0 diff --git a/entries/mouseover.xml b/entries/mouseover.xml index 51013868..c41a2270 100644 --- a/entries/mouseover.xml +++ b/entries/mouseover.xml @@ -1,7 +1,7 @@ .mouseover() - Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element. + Bind an event handler to the "mouseover" event, or trigger that event on an element. 1.0 diff --git a/entries/mouseup.xml b/entries/mouseup.xml index 35c42ccd..c3ff1b7c 100644 --- a/entries/mouseup.xml +++ b/entries/mouseup.xml @@ -1,7 +1,7 @@ .mouseup() - Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element. + Bind an event handler to the "mouseup" event, or trigger that event on an element. 1.0 diff --git a/entries/resize-shorthand.xml b/entries/resize-shorthand.xml index ec93db64..31f69a5d 100644 --- a/entries/resize-shorthand.xml +++ b/entries/resize-shorthand.xml @@ -1,7 +1,7 @@ .resize() - Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. + Bind an event handler to the "resize" event, or trigger that event on an element. 1.0 diff --git a/entries/resize.xml b/entries/resize.xml index 6bb29a97..8db7baa3 100644 --- a/entries/resize.xml +++ b/entries/resize.xml @@ -1,10 +1,10 @@ -Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. +Bind an event handler to the "resize" event, or trigger that event on an element. resize event - Bind an event handler to the "resize" JavaScript event. + Bind an event handler to the "resize" event. 1.7 diff --git a/entries/scroll-shorthand.xml b/entries/scroll-shorthand.xml index 595e61fb..67b7997e 100644 --- a/entries/scroll-shorthand.xml +++ b/entries/scroll-shorthand.xml @@ -1,7 +1,7 @@ .scroll() - Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element. + Bind an event handler to the "scroll" event, or trigger that event on an element. 1.0 diff --git a/entries/scroll.xml b/entries/scroll.xml index 498e4aab..a8f75227 100644 --- a/entries/scroll.xml +++ b/entries/scroll.xml @@ -1,10 +1,10 @@ -Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element. +Bind an event handler to the "scroll" event, or trigger that event on an element. scroll event - Bind an event handler to the "scroll" JavaScript event. + Bind an event handler to the "scroll" event. 1.7 diff --git a/entries/select.xml b/entries/select.xml index 597c0f1d..a26e449e 100644 --- a/entries/select.xml +++ b/entries/select.xml @@ -1,7 +1,7 @@ .select() - Bind an event handler to the "select" JavaScript event, or trigger that event on an element. + Bind an event handler to the "select" event, or trigger that event on an element. 1.0 diff --git a/entries/submit.xml b/entries/submit.xml index 4c57ff6e..3a91c7df 100644 --- a/entries/submit.xml +++ b/entries/submit.xml @@ -1,7 +1,7 @@ .submit() - Bind an event handler to the "submit" JavaScript event, or trigger that event on an element. + Bind an event handler to the "submit" event, or trigger that event on an element. 1.0 diff --git a/entries/unload.xml b/entries/unload.xml index f7ebe3c7..5c55eab6 100644 --- a/entries/unload.xml +++ b/entries/unload.xml @@ -18,7 +18,7 @@ - Bind an event handler to the "unload" JavaScript event. + Bind an event handler to the "unload" event.

Note: This API has been removed in jQuery 3.0; please use .on( "unload", handler ) instead of .unload( handler ) and .trigger( "unload" ) instead of .unload().

From e70bfa51e0fbc30dd490e0d8371d8d472fab5bd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sat, 22 Apr 2023 00:27:06 +0200 Subject: [PATCH 17/33] All: Deprecate mouse* shorthands --- entries/mousedown-shorthand.xml | 36 ++++++++++++++++ entries/mousedown.xml | 65 +++++++++++++++++------------ entries/mouseenter-shorthand.xml | 36 ++++++++++++++++ entries/mouseenter.xml | 71 +++++++++++++++++++------------- entries/mouseleave-shorthand.xml | 36 ++++++++++++++++ entries/mouseleave.xml | 71 +++++++++++++++++++------------- entries/mousemove-shorthand.xml | 36 ++++++++++++++++ entries/mousemove.xml | 71 +++++++++++++++++++------------- entries/mouseout-shorthand.xml | 36 ++++++++++++++++ entries/mouseout.xml | 68 ++++++++++++++++++------------ entries/mouseover-shorthand.xml | 36 ++++++++++++++++ entries/mouseover.xml | 71 +++++++++++++++++++------------- entries/mouseup-shorthand.xml | 36 ++++++++++++++++ entries/mouseup.xml | 64 +++++++++++++++++----------- 14 files changed, 539 insertions(+), 194 deletions(-) create mode 100644 entries/mousedown-shorthand.xml create mode 100644 entries/mouseenter-shorthand.xml create mode 100644 entries/mouseleave-shorthand.xml create mode 100644 entries/mousemove-shorthand.xml create mode 100644 entries/mouseout-shorthand.xml create mode 100644 entries/mouseover-shorthand.xml create mode 100644 entries/mouseup-shorthand.xml diff --git a/entries/mousedown-shorthand.xml b/entries/mousedown-shorthand.xml new file mode 100644 index 00000000..d5de95b1 --- /dev/null +++ b/entries/mousedown-shorthand.xml @@ -0,0 +1,36 @@ + + + .mousedown() + Bind an event handler to the "mousedown" event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .mousedown( handler ) or .mousedown( eventData, handler ), use .on( "mousedown", handler ) or .on( "mousedown", eventData, handler ), respectively.

+

Instead of .mousedown(), use .trigger( "mousedown" ).

+
+
+ + + + +
diff --git a/entries/mousedown.xml b/entries/mousedown.xml index b0aa57bd..8b5efe84 100644 --- a/entries/mousedown.xml +++ b/entries/mousedown.xml @@ -1,16 +1,15 @@ - - .mousedown() - Bind an event handler to the "mousedown" event, or trigger that event on an element. + +Bind an event handler to the "mousedown" event, or trigger that event on an element. + + + mousedown event + Bind an event handler to the "mousedown" event. - 1.0 - - A function to execute each time the event is triggered. - + 1.7 + + The string "mousedown". - - - 1.4.3 An object containing data that will be passed to the event handler. @@ -19,11 +18,7 @@ - - 1.0 - -

This method is a shortcut for .on( "mousedown", handler) in the first variation, and .trigger( "mousedown" ) in the second.

The mousedown event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.

For example, consider the HTML:

<div id="target">
@@ -39,19 +34,19 @@
     
     

The event handler can be bound to any <div>:


-$( "#target" ).mousedown(function() {
-  alert( "Handler for .mousedown() called." );
-});
+$( "#target" ).on( "mousedown", function() {
+  alert( "Handler for `mousedown` called." );
+} );
     

Now if we click on this element, the alert is displayed:

- Handler for .mousedown() called. + Handler for `mousedown` called.

We can also trigger the event when a different element is clicked:


-$( "#other" ).click(function() {
-  $( "#target" ).mousedown();
-});
+$( "#other" ).on( "click", function() {
+  $( "#target" ).trigger( "mousedown" );
+} );
     

After this code executes, clicks on Trigger the handler will also alert the message.

The mousedown event is sent when any mouse button is clicked. To act only on specific buttons, we can use the event object's which property. Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser. The value of which will be 1 for the left button, 2 for the middle button, or 3 for the right button.

@@ -62,12 +57,12 @@ $( "#other" ).click(function() { Show texts when mouseup and mousedown event triggering.
300 + + .change() + Bind an event handler to the "change" event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .change( handler ) or .change( eventData, handler ), use .on( "change", handler ) or .on( "change", eventData, handler ), respectively.

+

Instead of .change(), use .trigger( "change" ).

+
+
+ + + + +
diff --git a/entries/change.xml b/entries/change.xml index 0ff55558..da33bea3 100644 --- a/entries/change.xml +++ b/entries/change.xml @@ -1,16 +1,15 @@ - - .change() - Bind an event handler to the "change" event, or trigger that event on an element. + +Bind an event handler to the "change" event, or trigger that event on an element. + + + change event + Bind an event handler to the "change" event. - 1.0 - - A function to execute each time the event is triggered. - + 1.7 + + The string "change". - - - 1.4.3 An object containing data that will be passed to the event handler. @@ -19,11 +18,7 @@ - - 1.0 - -

This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

For example, consider the HTML:


@@ -40,34 +35,34 @@
     

The event handler can be bound to the text input and the select box:


-$( ".target" ).change(function() {
-  alert( "Handler for .change() called." );
-});
+$( ".target" ).on( "change", function() {
+  alert( "Handler for `change` called." );
+} );
     
-

Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply .change() without arguments:

+

Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, use .trigger( "change" ):


-$( "#other" ).click(function() {
-  $( ".target" ).change();
-});
+$( "#other" ).on( "click", function() {
+  $( ".target" ).trigger( "change" );
+} );
     

After this code executes, clicks on Trigger the handler will also alert the message. The message will display twice, because the handler has been bound to the change event on both of the form elements.

As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.

-

Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

+

Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw. - + +
+ + + change event + Trigger the "change" event on an element. + + 1.0 + + The string "change". + + + +

See the description for .on( "change", ... ).

+
+ +
+ +
diff --git a/entries/select-shorthand.xml b/entries/select-shorthand.xml new file mode 100644 index 00000000..e3fb0227 --- /dev/null +++ b/entries/select-shorthand.xml @@ -0,0 +1,36 @@ + + + .select() + Bind an event handler to the "select" event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .select( handler ) or .select( eventData, handler ), use .on( "select", handler ) or .on( "select", eventData, handler ), respectively.

+

Instead of .select(), use .trigger( "select" ).

+
+
+ + + + +
diff --git a/entries/select.xml b/entries/select.xml index a26e449e..30547152 100644 --- a/entries/select.xml +++ b/entries/select.xml @@ -1,16 +1,15 @@ - - .select() - Bind an event handler to the "select" event, or trigger that event on an element. + +Bind an event handler to the "select" event, or trigger that event on an element. + + + select event + Bind an event handler to the "select" event. - 1.0 - - A function to execute each time the event is triggered. - + 1.7 + + The string "select". - - - 1.4.3 An object containing data that will be passed to the event handler. @@ -19,9 +18,6 @@ - - 1.0 -

This method is a shortcut for .on( "select", handler ) in the first two variations, and .trigger( "select" ) in the third.

The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes.

@@ -35,19 +31,19 @@ </div>

The event handler can be bound to the text input:


-$( "#target" ).select(function() {
-  alert( "Handler for .select() called." );
-});
+$( "#target" ).on( "select", function() {
+  alert( "Handler for `select` called." );
+} );
     
-

Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, apply .select() without an argument:

+

Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, use .trigger( "select" ):


-$( "#other").click(function() {
-  $( "#target" ).select();
-});
+$( "#other").on( "click", function() {
+  $( "#target" ).trigger( "select" );
+} );
     

After this code executes, clicks on the Trigger button will also alert the message:

- Handler for .select() called. + Handler for `select` called.

In addition, the default select action on the field will be fired, so the entire text field will be selected.

@@ -57,9 +53,9 @@ $( "#other").click(function() { To do something when text in input boxes is selected: - + + + + + select event + Trigger the "select" event on an element. + + 1.0 + + The string "select". + + + +

See the description for .on( "select", ... ).

+
+ +
+ + From 2537bc792e095bda308933fd07dd82bb2d39752a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sat, 22 Apr 2023 00:44:58 +0200 Subject: [PATCH 19/33] All: Remove a few .click() uses --- entries/empty.xml | 4 ++-- entries/map.xml | 4 ++-- entries/remove.xml | 4 ++-- entries/toggle.xml | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/entries/empty.xml b/entries/empty.xml index 2be809f4..097ad9c6 100644 --- a/entries/empty.xml +++ b/entries/empty.xml @@ -31,9 +31,9 @@ $( ".hello" ).empty(); Removes all child nodes (including text nodes) from all paragraphs + + .contextmenu() + Bind an event handler to the "contextmenu" event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
+

This API is deprecated.

+

Instead of .contextmenu( handler ) or .contextmenu( eventData, handler ), use .on( "contextmenu", handler ) or .on( "contextmenu", eventData, handler ), respectively.

+

Instead of .contextmenu(), use .trigger( "contextmenu" ).

+
+
+ + + + +
diff --git a/entries/contextmenu.xml b/entries/contextmenu.xml index fd8f2205..d0f79a84 100644 --- a/entries/contextmenu.xml +++ b/entries/contextmenu.xml @@ -1,7 +1,10 @@ - - .contextmenu() - Bind an event handler to the "contextmenu" event, or trigger that event on an element. + +Bind an event handler to the "contextmenu" event, or trigger that event on an element. + + + contextmenu event + Bind an event handler to the "contextmenu" event. 1.0 @@ -19,12 +22,8 @@ - - 1.0 - -

This method is a shortcut for .on( "contextmenu", handler ) in the first two variations, and .trigger( "contextmenu" ) in the third. - The contextmenu event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the html element or the currently focused element. Any HTML element can receive this event. +

The contextmenu event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the html element or the currently focused element. Any HTML element can receive this event. For example, consider the HTML:


 <div id="target">
@@ -33,34 +32,34 @@
     

The event handler can be bound to the <div> as follows:


-$( "#target" ).contextmenu(function() {
-  alert( "Handler for .contextmenu() called." );
-});
+$( "#target" ).on( "contextmenu", function() {
+  alert( "Handler for `contextmenu` called." );
+} );
     

Now right-clicking on this element displays the alert:

- Handler for .contextmenu() called. + Handler for `contextmenu` called.

-

To trigger the event manually, call .contextmenu() without an argument:

+

To trigger the event manually, use .trigger( "contextmenu" ):


-$( "#target" ).contextmenu();
+$( "#target" ).trigger( "contextmenu" );
     
To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page: Right click to toggle background color. To trigger the submit event on the first form on the page, try: - + +
+ + + submit event + Trigger the "submit" event on an element. + + 1.0 + + The string "submit". + + + +

See the description for .on( "submit", ... ).

+
+ +
+ +
From 027012fe68b11da9fc2f88d0183ef4ad58464aae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:00:18 +0200 Subject: [PATCH 21/33] All: Add separate shorthand pages for load/unload --- entries/load-event.xml | 62 ++++++++++++++++++++---------------- entries/load-shorthand.xml | 40 +++++++++++++++++++++++ entries/unload-shorthand.xml | 37 +++++++++++++++++++++ entries/unload.xml | 55 +++++++++++++++++++------------- 4 files changed, 145 insertions(+), 49 deletions(-) create mode 100644 entries/load-shorthand.xml create mode 100644 entries/unload-shorthand.xml diff --git a/entries/load-event.xml b/entries/load-event.xml index d9be6d90..7f862b08 100644 --- a/entries/load-event.xml +++ b/entries/load-event.xml @@ -1,16 +1,15 @@ - - .load() + +Bind an event handler to the "load" event, or trigger that event on an element. + + + load event Bind an event handler to the "load" event. - 1.0 - - A function to execute when the event is triggered. - + 1.7 + + The string "load". - - - 1.4.3 An object containing data that will be passed to the event handler. @@ -20,10 +19,6 @@ -
-

Note: This API has been removed in jQuery 3.0; please use .on( "load", handler ) instead of .load( handler ) and .trigger( "load" ) instead of .load().

-
-

This method is a shortcut for .on( "load", handler ).

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

For example, consider a page with a simple image:


@@ -31,20 +26,17 @@
     

The event handler can be bound to the image:


-$( "#book" ).load(function() {
-  // Handler for .load() called.
-});
+$( "#book" ).on( "load", function() {
+  // Handler for `load` called.
+} );
     

As soon as the image has been loaded, the handler is called.

In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the .ready() method.

-
-

The Ajax module also has a method named .load(). Which one is fired depends on the set of arguments passed.

-

Caveats of the load event when used with images -

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

+

A common challenge developers attempt to solve using the load shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • @@ -60,24 +52,40 @@ $( "#book" ).load(function() { Run a function when the page is fully loaded including graphics. Add the class bigImg to all images with height greater than 100 upon each image load. - - - + + + + + load event + Trigger the "load" event on an element. + + 1.0 + + The string "load". + + + +

    See the description for .on( "load", ... ).

    +
    + +
    + + diff --git a/entries/load-shorthand.xml b/entries/load-shorthand.xml new file mode 100644 index 00000000..1c5873cb --- /dev/null +++ b/entries/load-shorthand.xml @@ -0,0 +1,40 @@ + + + .load() + Bind an event handler to the "load" event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
    +

    This API has been removed in jQuery 3.0.

    +

    Instead of .load( handler ) or .load( eventData, handler ), use .on( "load", handler ) or .on( "load", eventData, handler ), respectively.

    +

    Instead of .load(), use .trigger( "load" ).

    +
    +
    +

    The Ajax module also has a method named .load(). Which one is fired depends on the set of arguments passed.

    +
    +
    + + + + + +
    diff --git a/entries/unload-shorthand.xml b/entries/unload-shorthand.xml new file mode 100644 index 00000000..693768ec --- /dev/null +++ b/entries/unload-shorthand.xml @@ -0,0 +1,37 @@ + + + .unload() + Bind an event handler to the "unload" event, or trigger that event on an element. + + 1.0 + + A function to execute each time the event is triggered. + + + + + 1.4.3 + + An object containing data that will be passed to the event handler. + + + A function to execute each time the event is triggered. + + + + + 1.0 + + +
    +

    This API has been removed in jQuery 3.0.

    +

    Instead of .unload( handler ) or .unload( eventData, handler ), use .on( "unload", handler ) or .on( "unload", eventData, handler ), respectively.

    +

    Instead of .unload(), use .trigger( "unload" ).

    +
    +
    + + + + + +
    diff --git a/entries/unload.xml b/entries/unload.xml index 5c55eab6..bc640b09 100644 --- a/entries/unload.xml +++ b/entries/unload.xml @@ -1,15 +1,15 @@ - - .unload() + +Bind an event handler to the "unload" event, or trigger that event on an element. + + + unload event + Bind an event handler to the "unload" event. - 1.0 - - A function to execute when the event is triggered. - + 1.7 + + The string "unload". - - - 1.4.3 A plain object of data that will be passed to the event handler. @@ -18,35 +18,46 @@ - Bind an event handler to the "unload" event. -
    -

    Note: This API has been removed in jQuery 3.0; please use .on( "unload", handler ) instead of .unload( handler ) and .trigger( "unload" ) instead of .unload().

    -
    -

    This method is a shortcut for .on( "unload", handler ).

    The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.

    The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.

    Any unload event handler should be bound to the window object:

    
    -$( window ).unload(function() {
    -  return "Handler for .unload() called.";
    -});
    +$( window ).on( "unload", function() {
    +  return "Handler for `unload` called.";
    +} );
         

    This event is available so that scripts can perform cleanup when the user leaves the page. Most browsers will ignore calls to alert(), confirm() and prompt() inside the event handler. The string you return may be used in a confirmation dialog, but not all browsers support this. It is not possible to cancel the unload event with .preventDefault().

    To display an alert when a page is unloaded: - - - + +
    + + + unload event + Trigger the "unload" event on an element. + + 1.0 + + The string "unload". + + + +

    See the description for .on( "unload", ... ).

    +
    + +
    + +
    From 4f41f67a391cd929eb23d6a76e147e592bece07e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:08:22 +0200 Subject: [PATCH 22/33] All: Link to shorthands from event pages --- entries/blur.xml | 3 +++ entries/change.xml | 3 +++ entries/click.xml | 3 +++ entries/contextmenu.xml | 3 +++ entries/dblclick.xml | 3 +++ entries/focus.xml | 3 +++ entries/focusin.xml | 3 +++ entries/focusout.xml | 3 +++ entries/keydown.xml | 3 +++ entries/keypress.xml | 3 +++ entries/keyup.xml | 3 +++ entries/load-event.xml | 3 +++ entries/mousedown.xml | 3 +++ entries/mouseenter.xml | 3 +++ entries/mouseleave.xml | 3 +++ entries/mousemove.xml | 3 +++ entries/mouseout.xml | 3 +++ entries/mouseover.xml | 3 +++ entries/mouseup.xml | 3 +++ entries/resize.xml | 3 +++ entries/scroll.xml | 3 +++ entries/select.xml | 3 +++ entries/submit.xml | 3 +++ entries/unload.xml | 3 +++ 24 files changed, 72 insertions(+) diff --git a/entries/blur.xml b/entries/blur.xml index cdf09e35..d99003e9 100644 --- a/entries/blur.xml +++ b/entries/blur.xml @@ -19,6 +19,9 @@ +
    +

    This page describes the blur event. For the deprecated .blur() method, see .blur().

    +

    The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

    For example, consider the HTML:

    
    diff --git a/entries/change.xml b/entries/change.xml
    index da33bea3..e179c506 100644
    --- a/entries/change.xml
    +++ b/entries/change.xml
    @@ -19,6 +19,9 @@
         
       
       
    +    
    +

    This page describes the change event. For the deprecated .change() method, see .change().

    +

    The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

    For example, consider the HTML:

    
    diff --git a/entries/click.xml b/entries/click.xml
    index 51618f39..c5f9deb2 100644
    --- a/entries/click.xml
    +++ b/entries/click.xml
    @@ -19,6 +19,9 @@
         
       
       
    +    
    +

    This page describes the click event. For the deprecated .click() method, see .click().

    +

    The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. For example, consider the HTML:

    
    diff --git a/entries/contextmenu.xml b/entries/contextmenu.xml
    index d0f79a84..63d9c179 100644
    --- a/entries/contextmenu.xml
    +++ b/entries/contextmenu.xml
    @@ -23,6 +23,9 @@
         
       
       
    +    
    +

    This page describes the contextmenu event. For the deprecated .contextmenu() method, see .contextmenu().

    +

    The contextmenu event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the html element or the currently focused element. Any HTML element can receive this event. For example, consider the HTML:

    
    diff --git a/entries/dblclick.xml b/entries/dblclick.xml
    index 629ad4fe..9c4cf59a 100644
    --- a/entries/dblclick.xml
    +++ b/entries/dblclick.xml
    @@ -19,6 +19,9 @@
         
       
       
    +    
    +

    This page describes the dblclick event. For the deprecated .dblclick() method, see .dblclick().

    +

    The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. For example, consider the HTML:

    
    diff --git a/entries/focus.xml b/entries/focus.xml
    index df7b479d..21d6b2c2 100644
    --- a/entries/focus.xml
    +++ b/entries/focus.xml
    @@ -19,6 +19,9 @@
         
       
       
    +    
    +

    This page describes the focus event. For the deprecated .focus() method, see .focus().

    +
    • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
    • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.
    • diff --git a/entries/focusin.xml b/entries/focusin.xml index cb090ba7..7b5288f6 100644 --- a/entries/focusin.xml +++ b/entries/focusin.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the focusin event. For the deprecated .focusin() method, see .focusin().

      +

      The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

      This event will likely be used together with the focusout event.

      diff --git a/entries/focusout.xml b/entries/focusout.xml index 0aab1c69..7b90cb82 100644 --- a/entries/focusout.xml +++ b/entries/focusout.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the focusout event. For the deprecated .focusout() method, see .focusout().

      +

      The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

      This event will likely be used together with the focusin event.

      diff --git a/entries/keydown.xml b/entries/keydown.xml index 7283b9f1..576a1ad0 100644 --- a/entries/keydown.xml +++ b/entries/keydown.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the keydown event. For the deprecated .keydown() method, see .keydown().

      +

      The keydown event is sent to an element when the user presses a key on the keyboard. If the key is kept pressed, the event is sent every time the operating system repeats the key. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

      For example, consider the HTML:

      
      diff --git a/entries/keypress.xml b/entries/keypress.xml
      index f27d8de4..5a8ef279 100644
      --- a/entries/keypress.xml
      +++ b/entries/keypress.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the keypress event. For the deprecated .keypress() method, see .keypress().

      +

      Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

      This method is a shortcut for .on( "keypress", handler ) in the first two variations, and .trigger( "keypress" ) in the third.

      The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

      diff --git a/entries/keyup.xml b/entries/keyup.xml index 35f4303f..b0d6399f 100644 --- a/entries/keyup.xml +++ b/entries/keyup.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the keyup event. For the deprecated .keyup() method, see .keyup().

      +

      The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

      For example, consider the HTML:

      
      diff --git a/entries/load-event.xml b/entries/load-event.xml
      index 7f862b08..384fb802 100644
      --- a/entries/load-event.xml
      +++ b/entries/load-event.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the load event. For the removed .load() method, see .load().

      +

      The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

      For example, consider a page with a simple image:

      
      diff --git a/entries/mousedown.xml b/entries/mousedown.xml
      index 8b5efe84..5ce0e273 100644
      --- a/entries/mousedown.xml
      +++ b/entries/mousedown.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the mousedown event. For the deprecated .mousedown() method, see .mousedown().

      +

      The mousedown event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.

      For example, consider the HTML:

      <div id="target">
      diff --git a/entries/mouseenter.xml b/entries/mouseenter.xml
      index c1693846..d2232926 100644
      --- a/entries/mouseenter.xml
      +++ b/entries/mouseenter.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the mouseenter event. For the deprecated .mouseenter() method, see .mouseenter().

      +

      The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

      For example, consider the HTML:

      
      diff --git a/entries/mouseleave.xml b/entries/mouseleave.xml
      index 3b1fb753..98c1ff97 100644
      --- a/entries/mouseleave.xml
      +++ b/entries/mouseleave.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the mouseleave event. For the deprecated .mouseleave() method, see .mouseleave().

      +

      The mouseleave JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

      For example, consider the HTML:

      
      diff --git a/entries/mousemove.xml b/entries/mousemove.xml
      index df6de673..5aaeef0b 100644
      --- a/entries/mousemove.xml
      +++ b/entries/mousemove.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the mousemove event. For the deprecated .mousemove() method, see .mousemove().

      +

      The mousemove event is sent to an element when the mouse pointer moves inside the element. Any HTML element can receive this event.

      For example, consider the HTML:

      
      diff --git a/entries/mouseout.xml b/entries/mouseout.xml
      index 47da00a0..f18e9772 100644
      --- a/entries/mouseout.xml
      +++ b/entries/mouseout.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the mouseout event. For the deprecated .mouseout() method, see .mouseout().

      +

      This method is a shortcut for .on( "mouseout", handler ) in the first two variation, and .trigger( "mouseout" ) in the third.

      The mouseout event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

      For example, consider the HTML:

      diff --git a/entries/mouseover.xml b/entries/mouseover.xml index 865e31a0..6897db06 100644 --- a/entries/mouseover.xml +++ b/entries/mouseover.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the mouseover event. For the deprecated .mouseover() method, see .mouseover().

      +

      The mouseover event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

      For example, consider the HTML:

      
      diff --git a/entries/mouseup.xml b/entries/mouseup.xml
      index da670c96..63f787de 100644
      --- a/entries/mouseup.xml
      +++ b/entries/mouseup.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the mouseup event. For the deprecated .mouseup() method, see .mouseup().

      +

      This method is a shortcut for .on('mouseup', handler) in the first variation, and .trigger('mouseup') in the second.

      The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released. Any HTML element can receive this event.

      For example, consider the HTML:

      diff --git a/entries/resize.xml b/entries/resize.xml index 8db7baa3..74cc61fe 100644 --- a/entries/resize.xml +++ b/entries/resize.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the resize event. For the deprecated .resize() method, see .resize().

      +

      The resize event is sent to the window element when the size of the browser window changes:

      
       $( window ).on( "resize", function() {
      diff --git a/entries/scroll.xml b/entries/scroll.xml
      index a8f75227..5f46ddfe 100644
      --- a/entries/scroll.xml
      +++ b/entries/scroll.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the scroll event. For the deprecated .scroll() method, see .scroll().

      +

      The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

      For example, consider the HTML:

      
      diff --git a/entries/select.xml b/entries/select.xml
      index 30547152..fe1db663 100644
      --- a/entries/select.xml
      +++ b/entries/select.xml
      @@ -19,6 +19,9 @@
           
         
         
      +    
      +

      This page describes the select event. For the deprecated .select() method, see .select().

      +

      This method is a shortcut for .on( "select", handler ) in the first two variations, and .trigger( "select" ) in the third.

      The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes.

      For example, consider the HTML:

      diff --git a/entries/submit.xml b/entries/submit.xml index f1bfaa3a..42a32ea1 100644 --- a/entries/submit.xml +++ b/entries/submit.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the submit event. For the deprecated .submit() method, see .submit().

      +

      The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

      Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

      diff --git a/entries/unload.xml b/entries/unload.xml index bc640b09..72f832bb 100644 --- a/entries/unload.xml +++ b/entries/unload.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the unload event. For the removed .unload() method, see .unload().

      +

      The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.

      The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.

      From ada6134dffc3ecfeac875486c92aeb0a43907626 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:12:06 +0200 Subject: [PATCH 23/33] All: Add other AJAX shorthand pages --- entries/ajaxComplete-shorthand.xml | 18 ++++++++++++++++++ entries/ajaxError-shorthand.xml | 18 ++++++++++++++++++ entries/ajaxSend-shorthand.xml | 18 ++++++++++++++++++ entries/ajaxStop-shorthand.xml | 18 ++++++++++++++++++ entries/ajaxSuccess-shorthand.xml | 18 ++++++++++++++++++ 5 files changed, 90 insertions(+) create mode 100644 entries/ajaxComplete-shorthand.xml create mode 100644 entries/ajaxError-shorthand.xml create mode 100644 entries/ajaxSend-shorthand.xml create mode 100644 entries/ajaxStop-shorthand.xml create mode 100644 entries/ajaxSuccess-shorthand.xml diff --git a/entries/ajaxComplete-shorthand.xml b/entries/ajaxComplete-shorthand.xml new file mode 100644 index 00000000..adddf3eb --- /dev/null +++ b/entries/ajaxComplete-shorthand.xml @@ -0,0 +1,18 @@ + + + .ajaxComplete() + + 1.0 + + The function to be invoked. + + + +
      +

      This API is deprecated. Use .on( "ajaxComplete", handler ) instead.

      +
      +
      + + + +
      diff --git a/entries/ajaxError-shorthand.xml b/entries/ajaxError-shorthand.xml new file mode 100644 index 00000000..53d7c1bf --- /dev/null +++ b/entries/ajaxError-shorthand.xml @@ -0,0 +1,18 @@ + + + .ajaxError() + + 1.0 + + The function to be invoked. + + + +
      +

      This API is deprecated. Use .on( "ajaxError", handler ) instead.

      +
      +
      + + + +
      diff --git a/entries/ajaxSend-shorthand.xml b/entries/ajaxSend-shorthand.xml new file mode 100644 index 00000000..526c284a --- /dev/null +++ b/entries/ajaxSend-shorthand.xml @@ -0,0 +1,18 @@ + + + .ajaxSend() + + 1.0 + + The function to be invoked. + + + +
      +

      This API is deprecated. Use .on( "ajaxSend", handler ) instead.

      +
      +
      + + + +
      diff --git a/entries/ajaxStop-shorthand.xml b/entries/ajaxStop-shorthand.xml new file mode 100644 index 00000000..70cac0dc --- /dev/null +++ b/entries/ajaxStop-shorthand.xml @@ -0,0 +1,18 @@ + + + .ajaxStop() + + 1.0 + + The function to be invoked. + + + +
      +

      This API is deprecated. Use .on( "ajaxStop", handler ) instead.

      +
      +
      + + + +
      diff --git a/entries/ajaxSuccess-shorthand.xml b/entries/ajaxSuccess-shorthand.xml new file mode 100644 index 00000000..7e5c3079 --- /dev/null +++ b/entries/ajaxSuccess-shorthand.xml @@ -0,0 +1,18 @@ + + + .ajaxSuccess() + + 1.0 + + The function to be invoked. + + + +
      +

      This API is deprecated. Use .on( "ajaxSuccess", handler ) instead.

      +
      +
      + + + +
      From 6f41267e142c1faeb79c10c515f5f9a1e440fc88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:20:17 +0200 Subject: [PATCH 24/33] All: Migrare AJAX event pages --- entries/ajaxComplete.xml | 24 ++++++++++++++---------- entries/ajaxError.xml | 27 ++++++++++++++++----------- entries/ajaxSend.xml | 26 +++++++++++++++----------- entries/ajaxStop.xml | 24 ++++++++++++++---------- entries/ajaxSuccess.xml | 26 +++++++++++++++----------- 5 files changed, 74 insertions(+), 53 deletions(-) diff --git a/entries/ajaxComplete.xml b/entries/ajaxComplete.xml index ba400e71..12100558 100644 --- a/entries/ajaxComplete.xml +++ b/entries/ajaxComplete.xml @@ -1,9 +1,12 @@ - - .ajaxComplete() + + ajaxComplete event Register a handler to be called when Ajax requests complete. This is an AjaxEvent. - 1.0 + 1.7 + + The string "ajaxComplete". + @@ -12,7 +15,7 @@ -

      Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

      +

      Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all registered ajaxComplete handlers are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
       <div class="trigger">Trigger</div>
      @@ -21,9 +24,9 @@
           

      Attach the event handler to the document:

      
      -$( document ).ajaxComplete(function() {
      +$( document ).on( "ajaxComplete", function() {
         $( ".log" ).text( "Triggered ajaxComplete handler." );
      -});
      +} );
           

      Now, make an Ajax request using any jQuery method:

      
      @@ -34,12 +37,12 @@ $( ".trigger" ).click(function() {
           

      When the user clicks the element with class trigger and the Ajax request completes, the log message is displayed.

      All ajaxComplete handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, use the parameters passed to the handler. Each time an ajaxComplete handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:

      
      -$( document ).ajaxComplete(function( event, xhr, settings ) {
      +$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
         if ( settings.url === "ajax/test.html" ) {
           $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
             xhr.responseText );
         }
      -});
      +} );
           

      Note: You can get the returned Ajax contents by looking at xhr.responseText.

      @@ -48,11 +51,12 @@ $( document ).ajaxComplete(function( event, xhr, settings ) { Show a message when an Ajax request completes. + diff --git a/entries/ajaxError.xml b/entries/ajaxError.xml index 55ab65c8..ebe67f0b 100644 --- a/entries/ajaxError.xml +++ b/entries/ajaxError.xml @@ -1,9 +1,12 @@ - - .ajaxError() + + ajaxError event Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. - 1.0 + 1.7 + + The string "ajaxError". + The function to be invoked. @@ -13,7 +16,7 @@ -

      Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

      +

      Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all registered ajaxError handlers are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

      To observe this method in action, set up a basic Ajax load request.

      
       <button class="trigger">Trigger</button>
      @@ -22,35 +25,37 @@
           

      Attach the event handler to the document:

      
      -$( document ).ajaxError(function() {
      +$( document ).on( "ajaxError", function() {
         $( ".log" ).text( "Triggered ajaxError handler." );
      -});
      +} );
           

      Now, make an Ajax request using any jQuery method:

      
       $( "button.trigger" ).on( "click", function() {
         $( "div.result" ).load( "ajax/missing.html" );
      -});
      +} );
           

      When the user clicks the button and the Ajax request fails, because the requested file is missing, the log message is displayed.

      All ajaxError handlers are invoked, regardless of what Ajax request was completed. To differentiate between the requests, use the parameters passed to the handler. Each time an ajaxError handler is executed, it is passed the event object, the jqXHR object (prior to jQuery 1.5, the XHR object), and the settings object that was used in the creation of the request. When an HTTP error occurs, the fourth argument (thrownError) receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." For example, to restrict the error callback to only handling events dealing with a particular URL:

      
      -$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {
      +$( document ).on( "ajaxError", function( event, jqxhr, settings, thrownError ) {
         if ( settings.url == "ajax/missing.html" ) {
           $( "div.log" ).text( "Triggered ajaxError handler." );
         }
      -});
      +} ); +
      Show a message when an Ajax request fails. +
      diff --git a/entries/ajaxSend.xml b/entries/ajaxSend.xml index b4f7f9cd..a412c25a 100644 --- a/entries/ajaxSend.xml +++ b/entries/ajaxSend.xml @@ -1,9 +1,12 @@ - - .ajaxSend() + + ajaxSend event Attach a function to be executed before an Ajax request is sent. This is an Ajax Event. - 1.0 + 1.7 + + The string "ajaxSend". + The function to be invoked. @@ -12,7 +15,7 @@ -

      Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time.

      +

      Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all registerd ajaxSend handlers are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
       <div class="trigger">Trigger</div>
      @@ -21,24 +24,24 @@
           

      Attach the event handler to the document:

      
      -$( document ).ajaxSend(function() {
      +$( document ).on( "ajaxSend", function() {
         $( ".log" ).text( "Triggered ajaxSend handler." );
      -});
      +} );
           

      Now, make an Ajax request using any jQuery method:

      
       $( ".trigger" ).click(function() {
         $( ".result" ).load( "ajax/test.html" );
      -});
      +} );
           

      When the user clicks the element with class trigger and the Ajax request is about to begin, the log message is displayed.

      All ajaxSend handlers are invoked, regardless of what Ajax request is to be sent. If you must differentiate between the requests, use the parameters passed to the handler. Each time an ajaxSend handler is executed, it is passed the event object, the jqXHR object (in version 1.4, XMLHttpRequestobject), and the settings object that was used in the creation of the Ajax request. For example, you can restrict the callback to only handling events dealing with a particular URL:

      
      -$( document ).ajaxSend(function( event, jqxhr, settings ) {
      +$( document ).on( "ajaxSend", function( event, jqxhr, settings ) {
         if ( settings.url == "ajax/test.html" ) {
           $( ".log" ).text( "Triggered ajaxSend handler." );
         }
      -});
      +} );
           
      @@ -46,11 +49,12 @@ $( document ).ajaxSend(function( event, jqxhr, settings ) { Show a message before an Ajax request is sent. +
      diff --git a/entries/ajaxStop.xml b/entries/ajaxStop.xml index 910fce5d..d81bf98b 100644 --- a/entries/ajaxStop.xml +++ b/entries/ajaxStop.xml @@ -1,15 +1,18 @@ - - .ajaxStop() + + ajaxStop event Register a handler to be called when all Ajax requests have completed. This is an Ajax Event. - 1.0 + 1.7 + + The string "ajaxStop". + The function to be invoked. -

      Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

      +

      Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all registered ajaxStop handlers are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

      To observe this method in action, set up a basic Ajax load request:

      
       <div class="trigger">Trigger</div>
      @@ -18,15 +21,15 @@
           

      Attach the event handler to the document:

      
      -$( document ).ajaxStop(function() {
      +$( document ).on( "ajaxStop", function() {
         $( ".log" ).text( "Triggered ajaxStop handler." );
      -});
      +} );
           

      Now, make an Ajax request using any jQuery method:

      
      -$( ".trigger" ).click(function() {
      +$( ".trigger" ).on( "click", function() {
         $( ".result" ).load( "ajax/test.html" );
      -});
      +} );
           

      When the user clicks the element with class trigger and the Ajax request completes, the log message is displayed.

      @@ -35,11 +38,12 @@ $( ".trigger" ).click(function() { Hide a loading message after all the Ajax requests have stopped. +
      diff --git a/entries/ajaxSuccess.xml b/entries/ajaxSuccess.xml index 76210e77..13a2fe1f 100644 --- a/entries/ajaxSuccess.xml +++ b/entries/ajaxSuccess.xml @@ -1,9 +1,12 @@ - - .ajaxSuccess() + + ajaxSuccess event Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event. - 1.0 + 1.7 + + The string "ajaxSuccess". + The function to be invoked. @@ -13,7 +16,7 @@ -

      Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

      +

      Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all registered ajaxSuccess handlers are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
       <div class="trigger">Trigger</div>
      @@ -22,25 +25,25 @@
           

      Attach the event handler to any element:

      
      -$(document).ajaxSuccess(function() {
      +$( document ).on( "ajaxSuccess", function() {
         $( ".log" ).text( "Triggered ajaxSuccess handler." );
      -});
      +} );
           

      Now, make an Ajax request using any jQuery method:

      
       $( ".trigger" ).on( "click", function() {
         $( ".result" ).load( "ajax/test.html" );
      -});
      +} );
           

      When the user clicks the element with class trigger and the Ajax request completes successfully, the log message is displayed.

      All ajaxSuccess handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, you can use the parameters passed to the handler. Each time an ajaxSuccess handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:

      
      -$( document ).ajaxSuccess(function( event, xhr, settings ) {
      +$( document ).on( "ajaxSuccess", function( event, xhr, settings ) {
         if ( settings.url == "ajax/test.html" ) {
           $( ".log" ).text( "Triggered ajaxSuccess handler. The Ajax response was: " +
             xhr.responseText );
         }
      -});
      +} );
           

      Note: You can get the returned Ajax contents by looking at xhr.responseXML or xhr.responseText for xml and html respectively.

      @@ -49,11 +52,12 @@ $( document ).ajaxSuccess(function( event, xhr, settings ) { Show a message when an Ajax request completes successfully. +
      From 6f9101b4ddf46b002be357c0025274d46d71a07c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:22:45 +0200 Subject: [PATCH 25/33] All: Remove obsolete shortcut notes --- entries/keypress.xml | 1 - entries/mouseout.xml | 1 - entries/mouseup.xml | 1 - entries/select.xml | 1 - 4 files changed, 4 deletions(-) diff --git a/entries/keypress.xml b/entries/keypress.xml index 5a8ef279..16cf4303 100644 --- a/entries/keypress.xml +++ b/entries/keypress.xml @@ -23,7 +23,6 @@

      This page describes the keypress event. For the deprecated .keypress() method, see .keypress().

      Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

      -

      This method is a shortcut for .on( "keypress", handler ) in the first two variations, and .trigger( "keypress" ) in the third.

      The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

      A keypress event handler can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form controls can always get focus so are reasonable candidates for this event type.

      For example, consider the HTML:

      diff --git a/entries/mouseout.xml b/entries/mouseout.xml index f18e9772..3b014828 100644 --- a/entries/mouseout.xml +++ b/entries/mouseout.xml @@ -22,7 +22,6 @@

      This page describes the mouseout event. For the deprecated .mouseout() method, see .mouseout().

      -

      This method is a shortcut for .on( "mouseout", handler ) in the first two variation, and .trigger( "mouseout" ) in the third.

      The mouseout event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

      For example, consider the HTML:

      
      diff --git a/entries/mouseup.xml b/entries/mouseup.xml
      index 63f787de..205c0794 100644
      --- a/entries/mouseup.xml
      +++ b/entries/mouseup.xml
      @@ -22,7 +22,6 @@
           

      This page describes the mouseup event. For the deprecated .mouseup() method, see .mouseup().

      -

      This method is a shortcut for .on('mouseup', handler) in the first variation, and .trigger('mouseup') in the second.

      The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released. Any HTML element can receive this event.

      For example, consider the HTML:

      
      diff --git a/entries/select.xml b/entries/select.xml
      index fe1db663..60573881 100644
      --- a/entries/select.xml
      +++ b/entries/select.xml
      @@ -22,7 +22,6 @@
           

      This page describes the select event. For the deprecated .select() method, see .select().

      -

      This method is a shortcut for .on( "select", handler ) in the first two variations, and .trigger( "select" ) in the third.

      The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes.

      For example, consider the HTML:

      
      
      From f6ac37a9504a7f1f52eab454297d00a32f71ed15 Mon Sep 17 00:00:00 2001
      From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?=
       
      Date: Sun, 23 Apr 2023 04:28:08 +0200
      Subject: [PATCH 26/33] error: Separate the event page, like for load & unload
      
      ---
       entries/error-shorthand.xml | 37 ++++++++++++++++++++++++
       entries/error.xml           | 56 ++++++++++++++++++++++---------------
       2 files changed, 71 insertions(+), 22 deletions(-)
       create mode 100644 entries/error-shorthand.xml
      
      diff --git a/entries/error-shorthand.xml b/entries/error-shorthand.xml
      new file mode 100644
      index 00000000..b40d9b75
      --- /dev/null
      +++ b/entries/error-shorthand.xml
      @@ -0,0 +1,37 @@
      +
      +
      +  .error()
      +  Bind an event handler to the "error" event, or trigger that event on an element.
      +  
      +    1.0
      +    
      +      A function to execute each time the event is triggered.
      +      
      +    
      +  
      +  
      +    1.4.3
      +    
      +      An object containing data that will be passed to the event handler.
      +    
      +    
      +      A function to execute each time the event is triggered.
      +      
      +    
      +  
      +  
      +    1.0
      +  
      +  
      +    
      +

      This API has been removed in jQuery 3.0.

      +

      Instead of .error( handler ) or .error( eventData, handler ), use .on( "error", handler ) or .on( "error", eventData, handler ), respectively.

      +

      Instead of .error(), use .trigger( "error" ).

      +
      +
      + + + + + +
      diff --git a/entries/error.xml b/entries/error.xml index f76d4d1d..608c7c2d 100644 --- a/entries/error.xml +++ b/entries/error.xml @@ -1,16 +1,15 @@ - - .error() + +Bind an event handler to the "error" event, or trigger that event on an element. + + + error event Bind an event handler to the "error" event. - 1.0 - - A function to execute when the event is triggered. - + 1.7 + + The string "error". - - - 1.4.3 An object containing data that will be passed to the event handler. @@ -20,9 +19,6 @@ -
      -

      Note: This API has been removed in jQuery 3.0; please use .on( "error", handler ) instead of .error( handler ) and .trigger( "error" ) instead of .error().

      -

      The error event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

      For example, consider a page with a simple image element:

      
      @@ -31,14 +27,14 @@
           

      The event handler can be bound to the image:

      
       $( "#book" )
      -  .error(function() {
      -    alert( "Handler for .error() called." )
      -  })
      +  .on( "error", function() {
      +    alert( "Handler for `error` called." )
      +  } )
         .attr( "src", "missing.png" );
           

      If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:

      - Handler for .error() called. + Handler for `error` called.

      The event handler must be attached before the browser fires the error event, which is why the example sets the src attribute after attaching the handler. Also, the error event may not be correctly fired when the page is served locally; error relies on HTTP status codes and will generally not be triggered if the URL uses the file: protocol.

      @@ -46,19 +42,35 @@ $( "#book" )

      Note: A jQuery error event handler should not be attached to the window object. The browser fires the window's error event when a script error occurs. However, the window error event receives different arguments and has different return value requirements than conventional event handlers. Use window.onerror instead.

      - To replace all the missing images with another, you can update the src attribute inside the callback passed to .error(). Be sure that the replacement image exists; otherwise the error event will be triggered indefinitely. + To replace all the missing images with another, you can update the src attribute inside the error handler. Be sure that the replacement image exists; otherwise the error event will be triggered indefinitely. - - - + + + + + error event + Trigger the "error" event on an element. + + 1.0 + + The string "error". + + + +

      See the description for .on( "error", ... ).

      +
      + +
      + + From d0ef87b5d718d6ed6f330f181a35437070d52137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:50:18 +0200 Subject: [PATCH 27/33] All: Remove internal usage of deprecated event shorthands --- entries/ajaxComplete.xml | 4 ++-- entries/ajaxSend.xml | 2 +- entries/animate.xml | 24 +++++++++---------- entries/animated-selector.xml | 2 +- entries/attr.xml | 6 ++--- entries/bind.xml | 2 +- entries/button-selector.xml | 4 ++-- entries/checkbox-selector.xml | 4 ++-- entries/children.xml | 4 ++-- entries/clearQueue.xml | 4 ++-- entries/css.xml | 4 ++-- entries/data.xml | 2 +- entries/delay.xml | 2 +- entries/delegate.xml | 2 +- entries/dequeue.xml | 2 +- entries/detach.xml | 4 ++-- entries/each.xml | 12 +++++----- entries/event.currentTarget.xml | 4 ++-- entries/event.isDefaultPrevented.xml | 2 +- .../event.isImmediatePropagationStopped.xml | 2 +- entries/event.isPropagationStopped.xml | 4 ++-- entries/event.metaKey.xml | 2 +- entries/event.namespace.xml | 2 +- entries/event.preventDefault.xml | 2 +- entries/event.relatedTarget.xml | 4 ++-- entries/event.result.xml | 4 ++-- entries/event.stopImmediatePropagation.xml | 6 ++--- entries/event.stopPropagation.xml | 2 +- entries/event.target.xml | 4 ++-- entries/event.timeStamp.xml | 2 +- entries/event.type.xml | 2 +- entries/fadeIn.xml | 8 +++---- entries/fadeOut.xml | 10 ++++---- entries/fadeTo.xml | 22 ++++++++--------- entries/fadeToggle.xml | 10 ++++---- entries/file-selector.xml | 8 +++---- entries/get.xml | 2 +- entries/height.xml | 6 ++--- entries/hide.xml | 12 +++++----- entries/html.xml | 2 +- entries/image-selector.xml | 8 +++---- entries/index.xml | 2 +- entries/input-selector.xml | 4 ++-- entries/is.xml | 8 +++---- entries/jQuery.data.xml | 4 ++-- entries/jQuery.dequeue.xml | 2 +- entries/jQuery.fx.interval.xml | 2 +- entries/jQuery.fx.off.xml | 6 ++--- entries/jQuery.getScript.xml | 2 +- entries/jQuery.post.xml | 6 ++--- entries/jQuery.queue.xml | 14 +++++------ entries/jQuery.sub.xml | 2 +- entries/jQuery.xml | 4 ++-- entries/length.xml | 4 ++-- entries/live.xml | 2 +- entries/nth-child-selector.xml | 2 +- entries/nth-last-child-selector.xml | 2 +- entries/nth-last-of-type-selector.xml | 2 +- entries/off.xml | 4 ++-- entries/offset.xml | 2 +- entries/parents.xml | 2 +- entries/password-selector.xml | 8 +++---- entries/prev.xml | 2 +- entries/prop.xml | 4 ++-- entries/queue.xml | 14 +++++------ entries/radio-selector.xml | 8 +++---- entries/remove.xml | 2 +- entries/removeAttr.xml | 2 +- entries/replaceWith.xml | 4 ++-- entries/reset-selector.xml | 8 +++---- entries/selected-selector.xml | 6 ++--- entries/serializeArray.xml | 10 ++++---- entries/show.xml | 16 ++++++------- entries/size.xml | 6 ++--- entries/slice.xml | 2 +- entries/slideDown.xml | 18 +++++++------- entries/slideToggle.xml | 6 ++--- entries/slideUp.xml | 8 +++---- entries/stop.xml | 6 ++--- entries/submit-selector.xml | 10 ++++---- entries/text-selector.xml | 8 +++---- entries/toggle.xml | 6 ++--- entries/toggleClass.xml | 10 ++++---- entries/trigger.xml | 12 +++++----- entries/triggerHandler.xml | 12 +++++----- entries/unbind.xml | 4 ++-- entries/undelegate.xml | 4 ++-- entries/unwrap.xml | 2 +- entries/val.xml | 10 ++++---- entries/visible-selector.xml | 8 +++---- entries/width.xml | 12 +++++----- pages/Types.html | 10 ++++---- 92 files changed, 264 insertions(+), 264 deletions(-) diff --git a/entries/ajaxComplete.xml b/entries/ajaxComplete.xml index 12100558..87cf3712 100644 --- a/entries/ajaxComplete.xml +++ b/entries/ajaxComplete.xml @@ -30,9 +30,9 @@ $( document ).on( "ajaxComplete", function() {

      Now, make an Ajax request using any jQuery method:

      
      -$( ".trigger" ).click(function() {
      +$( ".trigger)" ).on( "click", function() {
         $( ".result" ).load( "ajax/test.html" );
      -});
      +} );
           

      When the user clicks the element with class trigger and the Ajax request completes, the log message is displayed.

      All ajaxComplete handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, use the parameters passed to the handler. Each time an ajaxComplete handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:

      diff --git a/entries/ajaxSend.xml b/entries/ajaxSend.xml index a412c25a..3b8939e0 100644 --- a/entries/ajaxSend.xml +++ b/entries/ajaxSend.xml @@ -30,7 +30,7 @@ $( document ).on( "ajaxSend", function() {

      Now, make an Ajax request using any jQuery method:

      
      -$( ".trigger" ).click(function() {
      +$( ".trigger)" ).on( "click", function() {
         $( ".result" ).load( "ajax/test.html" );
       } );
           
      diff --git a/entries/animate.xml b/entries/animate.xml index 57af4823..1ece251c 100644 --- a/entries/animate.xml +++ b/entries/animate.xml @@ -45,7 +45,7 @@

      To animate the opacity, left offset, and height of the image simultaneously:

      
      -$( "#clickme" ).click(function() {
      +$( "#clickme)" ).on( "click", function() {
         $( "#book" ).animate({
           opacity: 0.25,
           left: "+=50",
      @@ -101,7 +101,7 @@ $( "li" ).animate({
           

      As of jQuery version 1.4, you can set per-property easing functions within a single .animate() call. In the first version of .animate(), each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the .animate() method's optional easing argument. If the easing argument is not defined, the default swing function is used.

      For example, to simultaneously animate the width and height with the swing easing function and the opacity with the linear easing function:

      
      -$( "#clickme" ).click(function() {
      +$( "#clickme)" ).on( "click", function() {
         $( "#book" ).animate({
           width: [ "toggle", "swing" ],
           height: [ "toggle", "swing" ],
      @@ -113,7 +113,7 @@ $( "#clickme" ).click(function() {
           

      In the second version of .animate(), the options object can include the specialEasing property, which is itself an object of CSS properties and their corresponding easing functions. For example, to simultaneously animate the width using the linear easing function and the height using the easeOutBounce easing function:

      
      -$( "#clickme" ).click(function() {
      +$( "#clickme)" ).on( "click", function() {
         $( "#book" ).animate({
           width: "toggle",
           height: "toggle"
      @@ -137,7 +137,7 @@ $( "#clickme" ).click(function() {
           
      @@ -191,7 +191,7 @@ $( "#left" ).click(function(){
       
       The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
           
             
      diff --git a/entries/button-selector.xml b/entries/button-selector.xml
      index 858522e5..12c8471c 100644
      --- a/entries/button-selector.xml
      +++ b/entries/button-selector.xml
      @@ -16,9 +16,9 @@
       var input = $( ":button" ).addClass( "marked" );
       $( "div" ).text( "For this type jQuery found " + input.length + "." );
       // Prevent the form from submitting
      -$( "form" ).submit(function( event ) {
      +$( "form" ).on( "submit", function( event ) {
         event.preventDefault();
      -});
      +} );
       ]]>
           
           
           
             Get the data named "blah" stored at for an element.
             
           
      diff --git a/entries/dequeue.xml b/entries/dequeue.xml
      index 7caca4e3..24f89c3a 100644
      --- a/entries/dequeue.xml
      +++ b/entries/dequeue.xml
      @@ -14,7 +14,7 @@
         
           Use dequeue to end a custom queue function which allows the queue to keep going.
           
           
         
         
         
      -
      \ No newline at end of file
      +
      diff --git a/entries/event.isDefaultPrevented.xml b/entries/event.isDefaultPrevented.xml
      index 676b31f3..d9ada314 100644
      --- a/entries/event.isDefaultPrevented.xml
      +++ b/entries/event.isDefaultPrevented.xml
      @@ -9,7 +9,7 @@
         
           Checks whether event.preventDefault() was called.
           
           
           
      diff --git a/entries/event.namespace.xml b/entries/event.namespace.xml
      index ed661c92..bbebcda4 100644
      --- a/entries/event.namespace.xml
      +++ b/entries/event.namespace.xml
      @@ -14,7 +14,7 @@
       $( "p" ).on( "test.something", function( event ) {
         alert( event.namespace );
       });
      -$( "button" ).click(function( event ) {
      +$( "button" ).on( "click", function( event ) {
         $( "p" ).trigger( "test.something" );
       });
       ]]>
      diff --git a/entries/event.preventDefault.xml b/entries/event.preventDefault.xml
      index ac534fcb..82b4e104 100644
      --- a/entries/event.preventDefault.xml
      +++ b/entries/event.preventDefault.xml
      @@ -11,7 +11,7 @@
         
           Cancel the default action (navigation) of the click.
           
         
         
      diff --git a/entries/event.result.xml b/entries/event.result.xml
      index fa5cd9ad..40bd1872 100644
      --- a/entries/event.result.xml
      +++ b/entries/event.result.xml
      @@ -11,10 +11,10 @@
         
           Display previous handler's return value
           
      diff --git a/entries/event.stopImmediatePropagation.xml b/entries/event.stopImmediatePropagation.xml
      index e5b53eba..dd86bd7c 100644
      --- a/entries/event.stopImmediatePropagation.xml
      +++ b/entries/event.stopImmediatePropagation.xml
      @@ -25,14 +25,14 @@
         }
       ]]>
           
      @@ -40,7 +40,7 @@ function handler( event ) {
           target.children().toggle();
         }
       }
      -$( "ul" ).click( handler ).find( "ul" ).hide();
      +$( "ul" ).on( "click", handler ).find( "ul" ).hide();
       ]]>
           
           
      diff --git a/entries/fadeIn.xml b/entries/fadeIn.xml
      index a73fdc06..4af0872f 100644
      --- a/entries/fadeIn.xml
      +++ b/entries/fadeIn.xml
      @@ -29,7 +29,7 @@
       <img id="book" src="book.png" alt="" width="100" height="123">
       
       // With the element initially hidden, we can show it slowly:
      -$( "#clickme" ).click(function() {
      +$( "#clickme)" ).on( "click", function() {
         $( "#book" ).fadeIn( "slow", function() {
           // Animation complete
         });
      @@ -52,9 +52,9 @@ $( "#clickme" ).click(function() {
         
           Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
           
           
      @@ -76,7 +76,7 @@ $( "p" ).click(function() {
         
           Fades out spans in one section that you click on.
           
           
      @@ -131,23 +131,23 @@ $( "p" ).each(function( n ) {
         $( this ).text( $( "p" ).eq( r ).text() );
         $( "p" ).eq( r ).text( tmp );
         $( this ).css( "left", getPos( n ) );
      -});
      +} );
       $( "div" )
         .each(function( n ) {
           $( this ).css( "left", getPos( n ) );
      -  })
      +  } )
         .css( "cursor", "pointer" )
      -  .click( function() {
      +  .on( "click", function() {
           $( this ).fadeTo( 250, 0.25, function() {
             $( this )
               .css( "cursor", "" )
               .prev()
      -          .css({
      +          .css( {
                   "font-weight": "bolder",
                   "font-style": "italic"
      -          });
      -    });
      -  });
      +          } );
      +    } );
      +  } );
       ]]>
           
           
           
      diff --git a/entries/hide.xml b/entries/hide.xml
      index b90aed05..53aab56d 100644
      --- a/entries/hide.xml
      +++ b/entries/hide.xml
      @@ -49,7 +49,7 @@ $( ".target" ).hide();
           
      
       // With the element initially shown, we can hide it slowly:
      -$( "#clickme" ).click(function() {
      +$( "#clickme)" ).on( "click", function() {
         $( "#book" ).hide( "slow", function() {
           alert( "Animation complete." );
         });
      @@ -68,7 +68,7 @@ $( "#clickme" ).click(function() {
           Hides all paragraphs then the link on click.
           
      @@ -101,13 +101,13 @@ $( "button" ).click(function() {
         
           Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
           
      @@ -134,7 +134,7 @@ $( "#shower" ).click(function() {
       for ( var i = 0; i < 5; i++ ) {
         $( "
      " ).appendTo( document.body ); } -$( "div" ).click(function() { +$( "div)" ).on( "click", function() { $( this ).hide( 2000, function() { $( this ).remove(); }); diff --git a/entries/html.xml b/entries/html.xml index b830c566..4be065f3 100644 --- a/entries/html.xml +++ b/entries/html.xml @@ -29,7 +29,7 @@ $( "div.demo-container" ).html(); Click a paragraph to convert it from html to text. diff --git a/entries/jQuery.fx.off.xml b/entries/jQuery.fx.off.xml index 74bfd60a..3c93466d 100644 --- a/entries/jQuery.fx.off.xml +++ b/entries/jQuery.fx.off.xml @@ -20,10 +20,10 @@ var toggleFx = function() { $.fx.off = !$.fx.off; }; toggleFx(); -$( "button" ).click( toggleFx ); -$( "input" ).click(function() { +$( "button" ).on( "click", toggleFx ); +$( "input)" ).on( "click", function() { $( "div" ).toggle( "slow" ); -}); +} ); ]]> Queue a custom function. Selector Context

      By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

      
      -$( "div.foo" ).click(function() {
      +$( "div.foo)" ).on( "click", function() {
         $( "span", this ).addClass( "bar" );
       });
             
      @@ -62,7 +62,7 @@ $( "div.foo" ).click(function() {

      Please note that although you can pass text nodes and comment nodes into a jQuery collection this way, most operations don't support them. The few that do will have an explicit note on their API documentation page.

      A common use of single-DOM-element construction is to call jQuery methods on an element that has been passed to a callback function through the keyword this:

      
      -$( "div.foo" ).click(function() {
      +$( "div.foo)" ).on( "click", function() {
         $( this ).slideUp();
       });
             
      diff --git a/entries/length.xml b/entries/length.xml index 105f23d8..37a2d54c 100644 --- a/entries/length.xml +++ b/entries/length.xml @@ -12,12 +12,12 @@ Count the divs. Click to add more. diff --git a/entries/live.xml b/entries/live.xml index e88a67ce..26e7a563 100644 --- a/entries/live.xml +++ b/entries/live.xml @@ -104,7 +104,7 @@ $( "p" ).live( "myCustomEvent", function( event, myName, myValue ) { .fadeIn( 30 ) .fadeOut( 1000 ); }); -$( "button" ).click(function() { +$( "button)" ).on( "click", function() { $( "p" ).trigger( "myCustomEvent" ); }); ]]> diff --git a/entries/nth-child-selector.xml b/entries/nth-child-selector.xml index 741052a1..e2994d7d 100644 --- a/entries/nth-child-selector.xml +++ b/entries/nth-child-selector.xml @@ -53,7 +53,7 @@ $( "ul li:nth-child(2)" ).append( " - 2nd!" ); This is a playground to see how the selector works with different strings. Notice that this is different from the even and odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so... " ) .parent() - .css({ + .css( { background: "yellow", border: "3px red solid" - }); + } ); $( "div" ) .text( "For this type jQuery found " + input.length + "." ) .css( "color", "red" ); // Prevent form submission -$( "form" ).submit(function( event ) { +$( "form" ).on( "submit", function( event ) { event.preventDefault(); -}); +} ); ]]> diff --git a/entries/removeAttr.xml b/entries/removeAttr.xml index 92a92b22..46ce85b2 100644 --- a/entries/removeAttr.xml +++ b/entries/removeAttr.xml @@ -22,7 +22,7 @@ console.log( "onclick property: ", $element[ 0 ].onclick ); @@ -108,7 +108,7 @@ $( "p" ).replaceWith( "Paragraph. " ); On click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn't clone the object but rather moves it to replace the paragraph. diff --git a/entries/reset-selector.xml b/entries/reset-selector.xml index 301b0e5e..db558608 100644 --- a/entries/reset-selector.xml +++ b/entries/reset-selector.xml @@ -13,18 +13,18 @@ Finds all reset inputs. @@ -84,13 +84,13 @@ $( "button" ).click(function() { Show the first div, followed by each next adjacent sibling div in order, with a 200ms animation. Each animation starts when the previous sibling div's animation ends. @@ -120,19 +120,19 @@ function doIt() { $( "span,div" ).show( "slow" ); } // Can pass in function name -$( "button" ).click( doIt ); +$( "button" ).on( "click", doIt ); -$( "form" ).submit(function( event ) { +$( "form" ).on( "submit", function( event ) { if ( $( "input" ).val() === "yes" ) { $( "p" ).show( 4000, function() { $( this ).text( "Ok, DONE! (now showing)" ); - }); + } ); } $( "span,div" ).hide( "fast" ); // Prevent form submission event.preventDefault(); -}); +} ); ]]> diff --git a/entries/slice.xml b/entries/slice.xml index 81d76c98..8f94ce16 100644 --- a/entries/slice.xml +++ b/entries/slice.xml @@ -62,7 +62,7 @@ function colorEm() { ").css( 'background', 'yellow' );" ); } -$( "button" ).click( colorEm ); +$( "button" ).on( "click", colorEm ); ]]> @@ -84,7 +84,7 @@ $( "button" ).click(function() { Animates divs between dividers with a toggle that makes some appear and some disappear. diff --git a/entries/submit-selector.xml b/entries/submit-selector.xml index a4c9aa01..f6c48b8f 100644 --- a/entries/submit-selector.xml +++ b/entries/submit-selector.xml @@ -15,25 +15,25 @@ " ); -}) +} ); ]]> @@ -126,7 +126,7 @@ $( "button" ).click(function() { Shows all paragraphs, then hides them all, back and forth. diff --git a/entries/toggleClass.xml b/entries/toggleClass.xml index 3ce8196c..fcb8da42 100644 --- a/entries/toggleClass.xml +++ b/entries/toggleClass.xml @@ -99,7 +99,7 @@ $( "div.foo" ).toggleClass(function() { Toggle the class 'highlight' when a paragraph is clicked. @@ -128,15 +128,15 @@ $( "p" ).click(function() { Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click. Clicks to button #2 also trigger a click for button #1. diff --git a/entries/triggerHandler.xml b/entries/triggerHandler.xml index d72516a8..fb2da985 100644 --- a/entries/triggerHandler.xml +++ b/entries/triggerHandler.xml @@ -37,15 +37,15 @@ If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event. Set the value of an input box. As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on().

      Any string is legal for eventType; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using .trigger() or .triggerHandler().

      If the eventType string contains a period (.) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call .bind( "click.name", handler ), the string click is the event type, and the string name is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of .unbind() for more information.

      -

      There are shorthand methods for some standard browser events such as .click() that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the events category.

      +

      Some events have dedicated pages, describing specifics of their usage. For a complete list of those events, see the events category.

      When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

      A basic usage of .bind() is:

      
      diff --git a/entries/on.xml b/entries/on.xml
      index 568f3be6..6bab95f0 100644
      --- a/entries/on.xml
      +++ b/entries/on.xml
      @@ -90,7 +90,7 @@ $( "button" ).on( "click", {
           

      Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

      jQuery can process simple selectors of the form tag#id.class very quickly when they are used to filter delegated events. So, "#myForm", "a.external", and "button" are all fast selectors. Delegated events that use more complex selectors, particularly hierarchical ones, can be several times slower--although they are still fast enough for most applications. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of $( "body" ).on( "click", "#commentForm .addNew", addComment ) use $( "#commentForm" ).on( "click", ".addNew", addComment ).

      Additional notes

      -

      There are shorthand methods for some events such as .click() that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the events category.

      +

      Some events have dedicated pages, describing specifics of their usage. For a complete list of those events, see the events category.

      Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

      jQuery's event system requires that a DOM element allow attaching data via a property on the element, so that events can be tracked and delivered. The object, embed, and applet elements cannot attach data, and therefore cannot have jQuery events bound to them.

      The focus and blur events are specified by the W3C to not bubble, but jQuery defines cross-browser focusin and focusout events that do bubble. When focus and blur are used to attach delegated event handlers, jQuery maps the names and delivers them as focusin and focusout respectively. For consistency and clarity, use the bubbling event type names.

      From 4205fd6b44a0384d1b2611de0b53f1fbae85027b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 04:56:34 +0200 Subject: [PATCH 29/33] All: Remove internal ajax event shorthand usage --- entries/jQuery.ajax.xml | 2 +- entries/jQuery.ajaxSetup.xml | 2 +- entries/jQuery.getScript.xml | 6 +++--- notes.xsl | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/entries/jQuery.ajax.xml b/entries/jQuery.ajax.xml index 991e23ee..b8ee69a7 100644 --- a/entries/jQuery.ajax.xml +++ b/entries/jQuery.ajax.xml @@ -343,7 +343,7 @@ jqxhr.always(function() {

      By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.

      The data option can contain either a query string of the form key1=value1&key2=value2, or an object of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string using jQuery.param() before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the contentType option from application/x-www-form-urlencoded to a more appropriate MIME type.

      Advanced Options

      -

      The global option prevents handlers registered using .ajaxSend(), .ajaxError(), and similar methods from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with .ajaxSend() if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to false. See the descriptions of these methods below for more details.

      +

      The global option prevents handlers registered for the ajaxSend, ajaxError, and similar events from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with an ajaxSend handler if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to false. See the descriptions of these methods below for more details.

      If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the username and password options.

      Ajax requests are time-limited, so errors can be caught and handled to provide a better user experience. Request timeouts are usually either left at their default or set as a global default using $.ajaxSetup() rather than being overridden for specific requests with the timeout option.

      By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.

      diff --git a/entries/jQuery.ajaxSetup.xml b/entries/jQuery.ajaxSetup.xml index d175c54a..b0b54447 100644 --- a/entries/jQuery.ajaxSetup.xml +++ b/entries/jQuery.ajaxSetup.xml @@ -26,7 +26,7 @@ $.ajax({ });
      -

      Note: Global callback functions should be set with their respective global Ajax event handler methods—.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()—rather than within the options object for $.ajaxSetup().

      +

      Note: Global callback functions should be set via .on() with their respective global Ajax events—ajaxStart, ajaxStop, ajaxComplete, ajaxError, ajaxSuccess, ajaxSend—rather than within the options object for $.ajaxSetup().

      diff --git a/entries/jQuery.getScript.xml b/entries/jQuery.getScript.xml index 26fc8c9f..d6e091ab 100644 --- a/entries/jQuery.getScript.xml +++ b/entries/jQuery.getScript.xml @@ -48,13 +48,13 @@ $.getScript( "ajax/test.js" ) $( "div.log" ).text( "Triggered ajaxError handler." ); });
      -

      Prior to jQuery 1.5, the global .ajaxError() callback event had to be used in order to handle $.getScript() errors:

      +

      Prior to jQuery 1.5, the global ajaxError callback event had to be used in order to handle $.getScript() errors:

      
      -$( "div.log" ).ajaxError(function( e, jqxhr, settings, exception ) {
      +$( "div.log" ).on( "ajaxError", function( e, jqxhr, settings, exception ) {
         if ( settings.dataType == "script" ) {
           $( this ).text( "Triggered ajaxError handler." );
         }
      -});
      +} );
           

      Prior to jQuery 3.5.0, unsuccessful HTTP responses with a script Content-Type were still executed.

      Caching Responses

      diff --git a/notes.xsl b/notes.xsl index 42f56937..fb74e852 100644 --- a/notes.xsl +++ b/notes.xsl @@ -50,7 +50,7 @@ Script and JSONP requests are not subject to the same origin policy restrictions. - If a request with returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by is also available for error handling. + If a request with returns an error code, it will fail silently unless the script has also called the global ajaxError event. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by is also available for error handling. If $.ajax() or $.ajaxSetup() is called with the global option set to false, the event will not fire. From fecc648e1276430b3b00576eefc2ece7596d8347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Sun, 23 Apr 2023 05:00:48 +0200 Subject: [PATCH 30/33] All: Add descriptions to ajax event shorthand pages --- entries/ajaxComplete-shorthand.xml | 1 + entries/ajaxError-shorthand.xml | 1 + entries/ajaxSend-shorthand.xml | 1 + entries/ajaxStart-shorthand.xml | 1 + entries/ajaxStop-shorthand.xml | 1 + entries/ajaxSuccess-shorthand.xml | 1 + 6 files changed, 6 insertions(+) diff --git a/entries/ajaxComplete-shorthand.xml b/entries/ajaxComplete-shorthand.xml index adddf3eb..aec0003f 100644 --- a/entries/ajaxComplete-shorthand.xml +++ b/entries/ajaxComplete-shorthand.xml @@ -1,6 +1,7 @@ .ajaxComplete() + Register a handler to be called when Ajax requests complete. This is an AjaxEvent. 1.0 diff --git a/entries/ajaxError-shorthand.xml b/entries/ajaxError-shorthand.xml index 53d7c1bf..eab28e63 100644 --- a/entries/ajaxError-shorthand.xml +++ b/entries/ajaxError-shorthand.xml @@ -1,6 +1,7 @@ .ajaxError() + Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. 1.0 diff --git a/entries/ajaxSend-shorthand.xml b/entries/ajaxSend-shorthand.xml index 526c284a..79abf0c4 100644 --- a/entries/ajaxSend-shorthand.xml +++ b/entries/ajaxSend-shorthand.xml @@ -1,6 +1,7 @@ .ajaxSend() + Attach a function to be executed before an Ajax request is sent. This is an Ajax Event. 1.0 diff --git a/entries/ajaxStart-shorthand.xml b/entries/ajaxStart-shorthand.xml index fa46a0e5..8b27ed2a 100644 --- a/entries/ajaxStart-shorthand.xml +++ b/entries/ajaxStart-shorthand.xml @@ -1,6 +1,7 @@ .ajaxStart() + Register a handler to be called when the first Ajax request begins. This is an Ajax Event. 1.0 diff --git a/entries/ajaxStop-shorthand.xml b/entries/ajaxStop-shorthand.xml index 70cac0dc..a0fb420b 100644 --- a/entries/ajaxStop-shorthand.xml +++ b/entries/ajaxStop-shorthand.xml @@ -1,6 +1,7 @@ .ajaxStop() + Register a handler to be called when all Ajax requests have completed. This is an Ajax Event. 1.0 diff --git a/entries/ajaxSuccess-shorthand.xml b/entries/ajaxSuccess-shorthand.xml index 7e5c3079..ccf58964 100644 --- a/entries/ajaxSuccess-shorthand.xml +++ b/entries/ajaxSuccess-shorthand.xml @@ -1,6 +1,7 @@ .ajaxSuccess() + Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event. 1.0 From 65d32048a95153b10b3c79b51af1544258e1223a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Mon, 24 Apr 2023 17:51:21 +0200 Subject: [PATCH 31/33] All: Tweak the warning on load/unload, add one for error --- entries/error.xml | 3 +++ entries/load-event.xml | 2 +- entries/unload.xml | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/entries/error.xml b/entries/error.xml index 608c7c2d..d1f9493e 100644 --- a/entries/error.xml +++ b/entries/error.xml @@ -19,6 +19,9 @@ +
      +

      This page describes the error event. For the .error() method removed in jQuery 3.0, see .error().

      +

      The error event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

      For example, consider a page with a simple image element:

      
      diff --git a/entries/load-event.xml b/entries/load-event.xml
      index 384fb802..f7dbc65a 100644
      --- a/entries/load-event.xml
      +++ b/entries/load-event.xml
      @@ -20,7 +20,7 @@
         
         
           
      -

      This page describes the load event. For the removed .load() method, see .load().

      +

      This page describes the load event. For the .load() method removed in jQuery 3.0, see .load().

      The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

      For example, consider a page with a simple image:

      diff --git a/entries/unload.xml b/entries/unload.xml index 72f832bb..05d1c27a 100644 --- a/entries/unload.xml +++ b/entries/unload.xml @@ -20,7 +20,7 @@
      -

      This page describes the unload event. For the removed .unload() method, see .unload().

      +

      This page describes the unload event. For the .unload() method removed in jQuery 3.0, see .unload().

      The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.

      From a7fa37f7fd1cd757d84426c9003b020a5419dbe8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Mon, 24 Apr 2023 18:23:30 +0200 Subject: [PATCH 32/33] All: Add shorthand notes on AJAX event pages as well --- entries/ajaxComplete.xml | 3 +++ entries/ajaxError.xml | 3 +++ entries/ajaxSend.xml | 3 +++ entries/ajaxStart.xml | 3 +++ entries/ajaxStop.xml | 3 +++ entries/ajaxSuccess.xml | 3 +++ 6 files changed, 18 insertions(+) diff --git a/entries/ajaxComplete.xml b/entries/ajaxComplete.xml index 87cf3712..168865e7 100644 --- a/entries/ajaxComplete.xml +++ b/entries/ajaxComplete.xml @@ -15,6 +15,9 @@ +
      +

      This page describes the ajaxComplete event. For the deprecated .ajaxComplete() method, see .ajaxComplete().

      +

      Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all registered ajaxComplete handlers are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
      diff --git a/entries/ajaxError.xml b/entries/ajaxError.xml
      index ebe67f0b..d18cf977 100644
      --- a/entries/ajaxError.xml
      +++ b/entries/ajaxError.xml
      @@ -16,6 +16,9 @@
           
         
         
      +    
      +

      This page describes the ajaxError event. For the deprecated .ajaxError() method, see .ajaxError().

      +

      Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all registered ajaxError handlers are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

      To observe this method in action, set up a basic Ajax load request.

      
      diff --git a/entries/ajaxSend.xml b/entries/ajaxSend.xml
      index 3b8939e0..ad01194e 100644
      --- a/entries/ajaxSend.xml
      +++ b/entries/ajaxSend.xml
      @@ -15,6 +15,9 @@
           
         
         
      +    
      +

      This page describes the ajaxSend event. For the deprecated .ajaxSend() method, see .ajaxSend().

      +

      Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all registerd ajaxSend handlers are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
      diff --git a/entries/ajaxStart.xml b/entries/ajaxStart.xml
      index 991f992a..3d8f4df4 100644
      --- a/entries/ajaxStart.xml
      +++ b/entries/ajaxStart.xml
      @@ -12,6 +12,9 @@
           
         
         
      +    
      +

      This page describes the ajaxStart event. For the deprecated .ajaxStart() method, see .ajaxStart().

      +

      Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
      diff --git a/entries/ajaxStop.xml b/entries/ajaxStop.xml
      index d81bf98b..f42c7444 100644
      --- a/entries/ajaxStop.xml
      +++ b/entries/ajaxStop.xml
      @@ -12,6 +12,9 @@
           
         
         
      +    
      +

      This page describes the ajaxStop event. For the deprecated .ajaxStop() method, see .ajaxStop().

      +

      Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all registered ajaxStop handlers are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

      To observe this method in action, set up a basic Ajax load request:

      
      diff --git a/entries/ajaxSuccess.xml b/entries/ajaxSuccess.xml
      index 13a2fe1f..e92a1269 100644
      --- a/entries/ajaxSuccess.xml
      +++ b/entries/ajaxSuccess.xml
      @@ -16,6 +16,9 @@
           
         
         
      +    
      +

      This page describes the ajaxSuccess event. For the deprecated .ajaxSuccess() method, see .ajaxSuccess().

      +

      Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all registered ajaxSuccess handlers are executed at this time.

      To observe this method in action, set up a basic Ajax load request:

      
      
      From b4bc05e4d66cc373d2482a2a4883530e6130f266 Mon Sep 17 00:00:00 2001
      From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?=
       
      Date: Mon, 24 Apr 2023 18:30:23 +0200
      Subject: [PATCH 33/33] All: Fix links to AJAX events on shorthand pages
      
      ---
       entries/ajaxComplete-shorthand.xml | 2 +-
       entries/ajaxError-shorthand.xml    | 2 +-
       entries/ajaxSend-shorthand.xml     | 2 +-
       entries/ajaxStart-shorthand.xml    | 2 +-
       entries/ajaxStop-shorthand.xml     | 2 +-
       entries/ajaxSuccess-shorthand.xml  | 2 +-
       6 files changed, 6 insertions(+), 6 deletions(-)
      
      diff --git a/entries/ajaxComplete-shorthand.xml b/entries/ajaxComplete-shorthand.xml
      index aec0003f..73d766d5 100644
      --- a/entries/ajaxComplete-shorthand.xml
      +++ b/entries/ajaxComplete-shorthand.xml
      @@ -10,7 +10,7 @@
         
         
           
      -

      This API is deprecated. Use .on( "ajaxComplete", handler ) instead.

      +

      This API is deprecated. Use .on( "ajaxComplete", handler ) instead.

      diff --git a/entries/ajaxError-shorthand.xml b/entries/ajaxError-shorthand.xml index eab28e63..c1a306bd 100644 --- a/entries/ajaxError-shorthand.xml +++ b/entries/ajaxError-shorthand.xml @@ -10,7 +10,7 @@
      -

      This API is deprecated. Use .on( "ajaxError", handler ) instead.

      +

      This API is deprecated. Use .on( "ajaxError", handler ) instead.

      diff --git a/entries/ajaxSend-shorthand.xml b/entries/ajaxSend-shorthand.xml index 79abf0c4..4c1dc9cc 100644 --- a/entries/ajaxSend-shorthand.xml +++ b/entries/ajaxSend-shorthand.xml @@ -10,7 +10,7 @@
      -

      This API is deprecated. Use .on( "ajaxSend", handler ) instead.

      +

      This API is deprecated. Use .on( "ajaxSend", handler ) instead.

      diff --git a/entries/ajaxStart-shorthand.xml b/entries/ajaxStart-shorthand.xml index 8b27ed2a..41c7c71a 100644 --- a/entries/ajaxStart-shorthand.xml +++ b/entries/ajaxStart-shorthand.xml @@ -10,7 +10,7 @@
      -

      This API is deprecated. Use .on( "ajaxStart", handler ) instead.

      +

      This API is deprecated. Use .on( "ajaxStart", handler ) instead.

      diff --git a/entries/ajaxStop-shorthand.xml b/entries/ajaxStop-shorthand.xml index a0fb420b..e4b5ab83 100644 --- a/entries/ajaxStop-shorthand.xml +++ b/entries/ajaxStop-shorthand.xml @@ -10,7 +10,7 @@
      -

      This API is deprecated. Use .on( "ajaxStop", handler ) instead.

      +

      This API is deprecated. Use .on( "ajaxStop", handler ) instead.

      diff --git a/entries/ajaxSuccess-shorthand.xml b/entries/ajaxSuccess-shorthand.xml index ccf58964..358b5ff5 100644 --- a/entries/ajaxSuccess-shorthand.xml +++ b/entries/ajaxSuccess-shorthand.xml @@ -10,7 +10,7 @@
      -

      This API is deprecated. Use .on( "ajaxSuccess", handler ) instead.

      +

      This API is deprecated. Use .on( "ajaxSuccess", handler ) instead.