You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 9ab0a46
Browse filesBrowse the repository at this point in the historyBrowse files
Add missing events to the common components reference
Add onScrollEnd, onFullscreenChange, onFullscreenError, onMouseOver,
onPointerOver and onDragLeave to the list of common events.
Document onBeforeToggle, and list <dialog> and popover elements for
onToggle and onBeforeToggle.
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/common.md
+16-2Lines changed: 16 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -90,6 +90,8 @@ These standard DOM props are also supported for all built-in components:
90
90
*`onDragEndCapture`: A version of `onDragEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
91
91
*[`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the dragged content enters a valid drop target.
92
92
*`onDragEnterCapture`: A version of `onDragEnter` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
93
+
*[`onDragLeave`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the dragged content leaves a valid drop target.
94
+
*`onDragLeaveCapture`: A version of `onDragLeave` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
93
95
*[`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): A [`DragEvent` handler](#dragevent-handler) function. Fires on a valid drop target while the dragged content is dragged over it. You must call `e.preventDefault()` here to allow dropping.
94
96
*`onDragOverCapture`: A version of `onDragOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
95
97
*[`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user starts dragging an element.
@@ -98,6 +100,10 @@ These standard DOM props are also supported for all built-in components:
98
100
*`onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
99
101
*`onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element receives focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles.
100
102
*`onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
103
+
*[`onFullscreenChange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/fullscreenchange_event): An [`Event` handler](#event-handler) function. Fires when an element enters or exits fullscreen mode.
104
+
*`onFullscreenChangeCapture`: A version of `onFullscreenChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
105
+
*[`onFullscreenError`](https://developer.mozilla.org/en-US/docs/Web/API/Element/fullscreenerror_event): An [`Event` handler](#event-handler) function. Fires when the browser cannot switch an element to fullscreen mode.
106
+
*`onFullscreenErrorCapture`: A version of `onFullscreenError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
101
107
*[`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer.
102
108
*`onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
103
109
*[`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is pressed.
@@ -116,6 +122,8 @@ These standard DOM props are also supported for all built-in components:
116
122
*`onMouseMoveCapture`: A version of `onMouseMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
117
123
*[`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element, or if it moves into a child element.
118
124
*`onMouseOutCapture`: A version of `onMouseOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
125
+
*[`onMouseOver`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves onto an element, or onto one of its child elements.
126
+
*`onMouseOverCapture`: A version of `onMouseOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
119
127
*[`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is released.
120
128
*`onMouseUpCapture`: A version of `onMouseUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
121
129
*[`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when the browser cancels a pointer interaction.
@@ -128,12 +136,16 @@ These standard DOM props are also supported for all built-in components:
128
136
*`onPointerMoveCapture`: A version of `onPointerMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
129
137
*[`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and [a few other reasons.](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event)
130
138
*`onPointerOutCapture`: A version of `onPointerOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
139
+
*[`onPointerOver`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerover_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves onto an element, or onto one of its child elements.
140
+
*`onPointerOverCapture`: A version of `onPointerOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
131
141
*[`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer is no longer active.
132
142
*`onPointerUpCapture`: A version of `onPointerUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
133
143
*[`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to paste something from the clipboard.
134
144
*`onPasteCapture`: A version of `onPaste` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
135
145
*[`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): An [`Event` handler](#event-handler) function. Fires when an element has been scrolled. This event does not bubble.
136
146
*`onScrollCapture`: A version of `onScroll` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
147
+
*[`onScrollEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event): An [`Event` handler](#event-handler) function. Fires when an element has finished scrolling. This event does not bubble.
148
+
*`onScrollEndCapture`: A version of `onScrollEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
137
149
*[`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](#event-handler) function. Fires after the selection inside an editable element like an input changes. React extends the `onSelect` event to work for `contentEditable={true}` elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
138
150
*`onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
139
151
*[`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when the browser cancels a touch interaction.
@@ -171,9 +183,11 @@ These events fire only for the [`<dialog>`](https://developer.mozilla.org/en-US/
171
183
*[`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): An [`Event` handler](#event-handler) function. Fires when a dialog has been closed.
172
184
*`onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
173
185
174
-
These events fire only for the [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elements. Unlike browser events, they bubble in React:
186
+
These events fire for [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)and [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)elements, and for elements with the [`popover`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) attribute. Unlike browser events, they bubble in React:
175
187
176
-
*[`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details.
188
+
*[`onBeforeToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event): An [`Event` handler](#event-handler) function. Fires just before a popover or a dialog is shown or hidden.
189
+
*`onBeforeToggleCapture`: A version of `onBeforeToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
190
+
*[`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details, or just after a popover or a dialog is shown or hidden.
177
191
*`onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
178
192
179
193
These events fire for [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), and [SVG `<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) elements. Unlike browser events, they bubble in React:
0 commit comments