From b66a1c5e066996b04d477bd99f13b265194d6305 Mon Sep 17 00:00:00 2001 From: Spotter1091 Date: Sun, 30 Apr 2023 13:56:23 +0100 Subject: [PATCH] Added some react events list --- React-Events/React-Events.json | 62 ++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 React-Events/React-Events.json diff --git a/React-Events/React-Events.json b/React-Events/React-Events.json new file mode 100644 index 0000000..a1404a6 --- /dev/null +++ b/React-Events/React-Events.json @@ -0,0 +1,62 @@ +{ + "Clipboard": { + "onCopy": "It is an event handler that gets triggered whenever we copy the text on the webpage. like onCopy, but the difference is that onCopyCapture acts in the capture phase whereas onBlur acts in the bubbling phase i.e. phases of an event.", + "onCut": "The onCut event is a React synthetic event that is triggered when a user cuts selected content from an editable element. The event is fired immediately before the content is removed from the element's value, giving developers the opportunity to access the content before it is cut. The onCut event can be used to provide additional functionality to an application when content is cut from an editable element.", + "onPaste": "The onPaste event is a built-in event in React that is triggered whenever a user attempts to paste content into a text input field or other editable element. This event is based on the Clipboard API, which provides a way for web applications to interact with the user's clipboard. When a user initiates a paste action, the onPaste event is fired, allowing the application to intercept the content before it is added to the element. This provides the opportunity for the application to manipulate the pasted content or prevent it from being inserted altogether." + }, + "Composition": { + "onCompositionEnd": "The onCompositionEnd event in React is triggered when the composition of a sequence of characters is completed. This event is closely related to the onCompositionStart and onCompositionUpdate events, which are triggered when a sequence of characters is being composed. The composition of characters refers to the process of entering characters with input methods such as a keyboard, handwriting recognition, or speech recognition. When a sequence of characters is being composed, the onCompositionStart event is triggered, and as the sequence is being updated, the onCompositionUpdate event is triggered. Finally, when the composition is completed, the onCompositionEnd event is triggered.", + "onCompositionStart": "The onCompositionStart event is a React-specific event that is triggered when the user begins to compose text using an InputMethodEditor (IME), such as a virtual keyboard on a mobile device or a handwriting recognition system. This event is used to detect when the user is typing in a non-Latin script, such as Chinese or Japanese, where multiple keystrokes are required to input a single character. The onCompositionStart event is triggered when the IME opens and the user begins to enter text, and it provides a way for developers to handle the composition process and any associated events.", + "onCompositionUpdate": "The onCompositionUpdate event is a built-in event in React that is triggered when the user is typing text into an input field using an input method editor (IME). IMEs are software tools that allow users to enter characters and symbols that are not available on their keyboard. This event is important because it allows developers to track the progress of text input and to handle any intermediate changes to the text before it is finalized. The onCompositionUpdate event is typically used in conjunction with the onChange event to handle text input in a more granular way. When the onCompositionUpdate event is triggered, the developer can update the state of the component to reflect the current value of the input field. This allows the developer to provide real-time feedback to the user as they type, such as displaying a dropdown list of suggested words based on the current text input." + }, + "Keyboard": { + "onKeyDown": "The onKeyDown event is a keyboard event in React which is triggered when a key is pressed down on the keyboard. This event is used to capture the user's input and perform a specific action based on the key pressed. The event is attached to an element in the React component and is handled by a function that is passed as a prop. The onKeyDown event is used to handle keyboard interactions in React applications.The onKeyDown event is commonly used in React applications to perform specific actions based on the user's keyboard input. For example, if the user presses the enter key while filling out a form, the onKeyDown event can be used to submit the form. Another example is using the arrow keys to navigate through a list of items.", + "onKeyPress": "The onKeyPress event is a built-in event in React that is triggered whenever a key is pressed down while a user has focus on an input element or any other element that can receive keyboard input. This event is useful for capturing user input and performing some action based on the input value. The onKeyPress event is part of the keyboard events API in React, which also includes other events such as onKeyDown and onKeyUp. The onKeyPress event can be used in a variety of ways in React applications. For example, it can be used to validate user input as they type in a form field. This can be done by checking the value of the input field on each key press event and displaying an error message if the input does not meet the required criteria. Another use case for the onKeyPress event is to implement keyboard shortcuts in an application.", + "onKeyUp": "The onKeyUp event is a fundamental aspect of React development. It is a keyboard event that triggers when the user releases a key on the keyboard. The event listener associated with the onKeyUp event captures the key code of the released key and performs a specific action based on the code. The onKeyUp event is a part of the React SyntheticEvent system, which is a cross-browser wrapper around the native browser events. The SyntheticEvent system provides a consistent interface for handling events in React, regardless of the browser and platform. The onKeyUp event has numerous applications in React development. One of the most common applications of the onKeyUp event is in form validation. When the user enters data into a form, the onKeyUp event listener captures the input and validates it against a set of predefined rules. If the input is valid, the form can be submitted, and if it is not, an error message can be displayed to the user. Another application of the onKeyUp event is in creating keyboard shortcuts. When the user presses a specific key combination, the onKeyUp event listener triggers a function that performs a specific action, such as navigating to a different page or opening a modal window." + }, + "Focus": { + "onFocus": "The onFocus event in React is triggered when an element gains focus, usually as a result of a user clicking or tabbing onto it. It is a built-in React event that can be used to perform certain actions or update the state of the component when the element is focused. The event is fired only when the user interacts with the component, and not when the focus is programmatically set. The onFocus event is commonly used in form components such as input fields and buttons. When a user clicks on a form element, it gains focus and the onFocus event is triggered. This can be used to update the state of the form component, validate user input, or display a tooltip or message. For example, a form input field can be set to display a tooltip with instructions on how to fill it out when it gains focus. Similarly, a button can change its appearance or functionality when it is focused, such as highlighting it or enabling a keyboard shortcut.", + "onBlur": "In React, the onBlur event is triggered when an element loses focus. This means that when a user interacts with an element, such as clicking on it or pressing a key, and then moves their focus away from that element, the onBlur event is fired. This event can be used to perform certain actions or validations when a user leaves an input field. One common use case for the onBlur event is in form validation. For instance, a form may have a field where a user is required to enter their email address. By attaching an onBlur event to this field, the form can check whether the entered email is valid or not when the user moves their focus away from the input field. If the email is invalid, the form can show an error message to the user, prompting them to correct their input. " + }, + "Form": { + "onChange": "The onChange event is a crucial aspect of React programming that triggers a specific function whenever a user modifies the value of an input field. In simpler terms, it is an event that listens to changes made to a form input field and executes a particular function when the value of the field is updated. The onChange event is an integral part of React's uni-directional data flow, where changes in the state of one component trigger updates in other components. It is used to handle user input in a form and is a vital tool for building interactive and dynamic user interfaces. The onChange event is widely used in React applications for handling user input in form fields such as text input, select, and radio buttons. For instance, when a user types into a text input field, the onChange event listens to the input and updates the state of the component. This updated state is subsequently passed down to other components, where it triggers a re-rendering of the application's user interface.", + "onInput": "The onInput event in React is a JavaScript event that is triggered when the user inputs text or changes the value of an input element. This event is used to capture the user's input and update the state of the component accordingly. The onInput event is similar to the onChange event, but it is triggered every time the user types a character, rather than waiting for the user to complete their input before triggering the event. The onInput event is typically used in forms and other input-driven components. When the user inputs text into a form field, the onInput event can be used to capture that input and update the state of the component. This allows the component to respond to the user's input in real-time, providing a more interactive and responsive user experience. For example, an input field that validates the user's input as they type can use the onInput event to trigger the validation function and provide immediate feedback to the user.", + "onSubmit": "The onSubmit event is an event handler that is commonly used in React applications. It is triggered when a form is submitted by the user. This event allows developers to capture the data entered by the user and perform any necessary actions based on that data. The onSubmit event is a fundamental aspect of form handling in React, and is used extensively in web applications that require user input. In React, the onSubmit event is used to handle the submission of forms. When a user submits a form, the onSubmit event is triggered, and the data entered by the user is captured. This data can then be used to perform various actions, such as sending an email, updating a database, or displaying a message to the user. The onSubmit event is commonly used in conjunction with other React components, such as input fields, buttons, and forms, to create interactive and dynamic user interfaces." + }, + "Mouse": { + "onClick": "In React, onClick is an event handler that triggers when a user clicks on a particular element, such as a button or link. This event is used to perform a specific action, such as updating the state of a component, displaying a modal, or navigating to a new page. The onClick event is a core feature of React and is essential for creating interactive and responsive user interfaces. The onClick event works by attaching a function to the element that is triggered when the user clicks on it. This function can be defined within the component or passed down as a prop from a parent component. When the onClick event is triggered, the function is called, and any necessary actions are performed. It's essential to note that the onClick event should only be used for user interactions and should not be used for programmatic changes to the state or other logic within the component.", + "onContextMenu": "The onContextMenu event is a built-in event in React that is triggered when the user right-clicks on an element. This event is usually used to show a context menu with options that are relevant to the element being clicked. The onContextMenu event works by attaching an event listener to the element and then executing a function when the event is triggered. The onContextMenu event has many practical applications in React. For example, it can be used to show a context menu with options to edit, delete, or share an item in a list. It can also be used to show a custom menu with options that are specific to your application", + "onDoubleClick": "The onDoubleClick event in React is a type of mouse event that is triggered when a user double-clicks on a specific element. When this event is fired, React invokes a callback function that is associated with the onDoubleClick event. This event is useful for implementing interactive features such as double-clicking to edit a particular item or opening a modal window. The onDoubleClick event follows the same principles as other mouse events in React, such as onClick and onMouseDown. When a user double-clicks on an element with the onDoubleClick event, a synthetic event is created by React, which contains information about the event, such as the target element and the position of the mouse. This event is then passed to the callback function associated with the onDoubleClick event.", + "onDragEnd": "The onDragEnd event in React is triggered when the user finishes dragging an element. This event is primarily used to handle the final state of the dragged element and any related actions that may need to be taken based on the user's actions. The onDragEnd event can be used to update the state of the component, trigger an API call, or perform any other action based on the actions taken by the user during the drag operation.", + "onDragEnter": "In React, the onDragEnter event is triggered when a draggable element is dragged over a drop target element. This event is used to handle the behavior of the drop target when a draggable element is being dragged over it. When the onDragEnter event is triggered, the drop target is highlighted to indicate to the user that the element can be dropped onto it.", + "onDragExit": "The onDragExit event in React is triggered when a draggable element, such as an image or a file, is dragged out of a drop target element. It is a type of drag and drop event that is used to handle the behavior of the drop target when the draggable element is no longer hovering over it. The onDragExit event is a part of the HTML5 drag and drop API and can be used to customize the visual feedback and behavior of the drop target element.", + "onDragLeave": "In React, onDragLeave is an event that is triggered when an element is being dragged over another element and then leaves that element's boundaries. This event is used to handle the behavior of the element that is being dragged when it is no longer over the drop target area. The onDragLeave event is part of the HTML5 drag and drop API and can be used to create more interactive and responsive web applications.", + "onDragOver": "The onDragOver event is a built-in event in React that occurs when an element is being dragged over another element. This event is used to handle the drag and drop functionality in web applications. When an element is being dragged over another element, the onDragOver event is triggered repeatedly until the user releases the mouse button or the dragged item is dropped onto the target element.", + "onDragStar": "The onDragStart event is a built-in event in React that is triggered when an element is being dragged. It is a mouse event that is fired when the user starts to drag an element. This event is useful for implementing drag and drop functionality in web applications." + }, + "Selection": { + "onSelect": "The onSelect event is a React event that is triggered when a user selects text in an input field or textarea. It is a synthetic event that is created by React and provides information about the selected text, such as the starting and ending indices of the selection. The onSelect event is a controlled event, which means that React manages the state of the selected text and updates it accordingly. When the onSelect event is triggered, React updates the state of the component and re-renders it, which allows the developer to respond to the user's selection." + }, + "Touch": { + "onTouchCancel": "In React, the onTouchCancel event is triggered when a touch interaction with an element is cancelled. This can happen when the user's touch is interrupted by system events like an incoming call or an alert, or when the user swipes off the screen. The onTouchCancel event is a part of the touch events API and is a way to handle such interruptions gracefully. It is similar to the onMouseLeave event in traditional mouse-based interactions.", + "onTouchEnd": "The onTouchEnd event in React is a touch-based event that is triggered when the user finishes touching the screen. This event is used to capture the end of a touch gesture, and it provides the coordinates of the touch point. This event is similar to the onClick event, but it is used specifically for touch-based user interfaces.", + "onTouchMove": "The onTouchMove event in React is a touch-based event that occurs when a user moves their finger across the screen of a touch-enabled device. This event is triggered when the user touches the screen and moves their finger in any direction. The onTouchMove event provides the developer with the ability to track the movement of the user's finger on the screen and use that information to perform specific actions, such as scrolling or swiping.", + "onTouchStart": "The onTouchMove event in React is a touch-based event that occurs when a user moves their finger across the screen of a touch-enabled device. This event is triggered when the user touches the screen and moves their finger in any direction. The onTouchMove event provides the developer with the ability to track the movement of the user's finger on the screen and use that information to perform specific actions, such as scrolling or swiping." + }, + "UI": { + "onScroll": "In React, onScroll event is a built-in event that gets triggered when a user scrolls a scrollable element such as a window, a div or a table. This event is used to detect the position of the scroll bar and perform certain actions accordingly. The onScroll event is based on the principle of event-driven programming in which an action is taken when a specific event is triggered." + }, + "Media": { + "onAbort": "The onAbort event in React is triggered when a user aborts the loading of an image or media file. It is a built-in event that can be used to handle errors and prevent the loading of unnecessary resources. The event is fired when an image or media file is interrupted or stopped from loading before it is fully loaded. This can happen when the user clicks the stop button in the browser or navigates away from the page before the file has finished loading.", + "onCanPlay": "The onCanPlay event in React is a media event that is triggered when the browser can play the media without stopping to buffer. It is a type of HTML media event that is used to determine if the media can be played or not. This event is triggered when the browser has loaded enough media data to play the media without any interruptions. It is an important event that is used to optimize the user experience by ensuring that the media is played smoothly and without any delays.", + "onCanPlayThrough": "In React, onCanPlaythrough is an event that is triggered when a media element, such as an audio or video file, can be played through to the end without buffering. This event is fired when the media element's readyState attribute changes to HAVE_ENOUGH_DATA, indicating that enough media data has been loaded to play the entire file without interruption. The onCanPlaythrough event is one of several media events that can be used to monitor the loading and playback status of media elements in a React application.", + "onDurationChange": "The onDurationChange event is a built-in event in React that is triggered when the duration of a media element, such as an audio or video player, changes. This event is fired when the duration of the media element is initially set, as well as when the media duration changes due to factors such as seeking or buffering.", + "onEmptied": "In React, the onEmptied event is a built-in event that is triggered when a media element such as an audio or video file is emptied or reset. This event is typically used to perform certain actions when the media element's playback has ended or has been reset to its initial state. ", + "onEncrypted": "The onEncrypted event in React is a built-in event that is triggered when a MediaStreamTrack is successfully encrypted. This event is part of the WebRTC API, which allows for real-time communication between browsers. The encryption of the MediaStreamTrack ensures the privacy and security of the data being transmitted over the network. When the onEncrypted event is triggered, it indicates that the encryption process has been successful and the encrypted data can now be transmitted safely.", + "onEnded": "The onEnded event is a built-in event in React that is triggered when a media element, such as an audio or video player, has finished playing. This event is based on the HTML5 media API, which provides a variety of methods and properties for controlling and manipulating media elements. The onEnded event is a useful tool for developers who want to add custom behavior to their media players, such as automatically playing the next item in a playlist, displaying a message when playback is complete, or resetting the player to its initial state.", + "onError": "In React, an onError event is triggered when an error occurs during the rendering process of a component. This event is used to handle errors that occur within the component hierarchy and can be used to display a fallback UI or to log the error for debugging purposes. The onError event is part of the React SyntheticEvent system and can be accessed through the event object passed to the event handler function." + }, + "Transition": { + "onTransitionEnd": "In React, onTransitionEnd is an event that is triggered when a CSS transition has completed. It is a callback function that is invoked after the transition animation has finished. This event is utilized to detect the end of a transition and to perform additional tasks, such as updating state or triggering other animations. " + } +} \ No newline at end of file