Skip to content

Commit 9ab0a46

Browse 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.
1 parent 8c68ae8 commit 9ab0a46

1 file changed

Lines changed: 16 additions & 2 deletions

File tree

  • src/content/reference/react-dom/components

‎src/content/reference/react-dom/components/common.md‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ These standard DOM props are also supported for all built-in components:
9090
* `onDragEndCapture`: A version of `onDragEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
9191
* [`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.
9292
* `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)
9395
* [`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.
9496
* `onDragOverCapture`: A version of `onDragOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
9597
* [`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:
98100
* `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
99101
* `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.
100102
* `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)
101107
* [`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.
102108
* `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
103109
* [`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:
116122
* `onMouseMoveCapture`: A version of `onMouseMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
117123
* [`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.
118124
* `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)
119127
* [`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.
120128
* `onMouseUpCapture`: A version of `onMouseUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
121129
* [`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:
128136
* `onPointerMoveCapture`: A version of `onPointerMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
129137
* [`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)
130138
* `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)
131141
* [`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.
132142
* `onPointerUpCapture`: A version of `onPointerUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
133143
* [`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.
134144
* `onPasteCapture`: A version of `onPaste` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
135145
* [`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.
136146
* `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)
137149
* [`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).
138150
* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
139151
* [`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/
171183
* [`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.
172184
* `onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
173185

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:
175187

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.
177191
* `onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
178192

179193
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

Comments
 (0)