diff --git a/assigment.json b/assigment.json index 39a9251..a68882a 100644 --- a/assigment.json +++ b/assigment.json @@ -1,16 +1,97 @@ -[ - { - "Clipboard": { - "onCopy": "lorenm loraem lorem", - "onCut": "lorem lorem lorem", - "onPaste": "lorem lorem lorem" - } - }, - { - "Composition":{ - "onCompositionEnd": "lorem lorem lorem", - "onCompositionStart": "lorem lorem lorem", - "onCompositionUpdate": "lorem lorem lorem" - } +{ + "Clipboard": { + "onCopy": "The onCopy event occurs when the user copies the content of an element to the clipboard using the 'Copy' command. This event is triggered when the user performs a copy action, typically by selecting text or data and then using the keyboard shortcut or context menu to copy it to the clipboard. This event can be used to capture the copied content and perform some additional action, such as logging the copied data or modifying it before it is stored in the clipboard.", + "onCut": "The onCut event occurs when the user cuts the content of an element to the clipboard using the 'Cut' command. This event is triggered when the user performs a cut action, typically by selecting text or data and then using the keyboard shortcut or context menu to cut it from its original location and store it in the clipboard. This event can be used to capture the cut content and perform some additional action, such as updating the display to reflect the removed content or modifying it before it is stored in the clipboard.", + "onPaste": "The onPaste event occurs when the user pastes the content from the clipboard into an element using the 'Paste' command. This event is triggered when the user performs a paste action, typically by using the keyboard shortcut or context menu to insert the contents of the clipboard at the current cursor location. This event can be used to capture the pasted content and perform some additional action, such as validating or modifying the pasted data before it is inserted into the document." + }, + "Composition": { + "onCompositionEnd": "The onCompositionEnd event occurs when the composition of a character is completed or cancelled. onCompositionEnd is triggered when the composition string is completed and converted into a single character. This event is useful for applications that need to perform actions after the user has finished inputting text. For example, a chat application could use this event to send the user's message after they have finished composing it.", + "onCompositionStart": "The onCompositionStart event occurs when the user starts entering a character that requires composition such as those with diacritical marks. onCompositionStart is triggered when the user starts to input a composition string, which is a sequence of characters that will be combined into a single character when the input is complete. This event is useful for applications that need to know when the user is typing a composition string so that they can disable auto-complete or auto-correct functions that may interfere with the user's input.", + "onCompositionUpdate": "The onCompositionUpdate event occurs when a character is being composed, and new characters are being added or deleted. onCompositionUpdate is triggered whenever the composition string changes. This event provides real-time updates to the application about the user's input, allowing for real-time feedback and suggestions to the user. For example, if the user is typing in a search box, the application could use this event to suggest search terms as the user types." + }, + "Keyboard": { + "onKeyDown": "The onKeyDown event occurs when a key on the keyboard is pressed down. This event is triggered continuously while the key is being held down, and can be used to detect repeated keystrokes. The event provides information about the key that was pressed, such as its code and location. This information can be used to perform various actions, such as moving a cursor or triggering a function.", + "onKeyPress": "The onKeyPress event occurs when a key on the keyboard is pressed down and a character is being inputted. This event is triggered only once per character, and provides information about the character that was inputted, such as its Unicode value. This information can be used to perform actions such as displaying the character on the screen or updating a text field.", + "onKeyUp": "The onKeyUp event occurs when a key on the keyboard is released after being pressed down. This event is triggered only once per key release, and provides information about the key that was released. This information can be used to perform various actions, such as resetting a cursor position or updating a value." + }, + "Focus": { + "onFocus": "The onFocus event is triggered when an element becomes the focus of user input, such as when a user clicks on an input field or navigates to it using the keyboard. This event is commonly used to change the appearance or behavior of an element when it receives focus, such as displaying a tooltip or highlighting the text inside an input field. It can also be used to trigger other actions, such as showing a dropdown menu or opening a modal window.", + "onBlur": "The onBlur event is triggered when an element loses focus, either because the user clicked outside of it or navigated away using the keyboard. This event is commonly used to validate user input, such as checking the format of an email address or password. It can also be used to change the appearance or behavior of an element when it loses focus, such as hiding a tooltip or removing the highlight from an input field. It can also be used to trigger other actions, such as submitting a form or saving data to a server." + }, + "Form": { + "onChange": "The onChange event is triggered when the value of an input element, such as a text field or checkbox, is changed by the user. This event is commonly used to update the state of an application or to validate user input. It can also be used to trigger other actions, such as filtering a list of results or showing/hiding additional input fields based on user selections.", + "onInput": "The onInput event is similar to the onChange event in that it is triggered when the value of an input element is changed by the user. However, the onInput event is triggered more frequently than the onChange event and can capture changes made by methods other than user input, such as programmatically changing the value of an input element. This event is commonly used to provide real-time feedback to the user, such as showing a character counter or formatting text as it is typed.", + "onSubmit": "The onSubmit event is triggered when a form is submitted, either by clicking a submit button or pressing the enter key while inside an input field. This event is commonly used to validate user input, such as checking that required fields have been filled out or that the format of certain fields is correct. It can also be used to trigger other actions, such as sending data to a server or redirecting the user to a new page." + }, + "Mouse": { + "onContextMenu": "The onContextMenu event in JavaScript is triggered when a user right-clicks on an element, such as an image or a text box, to open the context menu. This event can be used to customize the menu options or to trigger a function that performs an action when a user selects an option from the menu. It is commonly used in web development to provide users with additional options or to enhance the user experience of a webpage.", + "onDoubleClick": "The onDoubleClick event in JavaScript is triggered when a user double-clicks on an element, such as an image or a button, with a mouse or trackpad. This event can be used to perform an action or to trigger a function that updates the page's content or state. It is commonly used in web development to create interactive user interfaces and to handle user interactions with the webpage.", + "onDrag": "The onDrag event in JavaScript is triggered when a user drags an element, such as an image or a text box, with a mouse or trackpad. This event can be used to update the element's position or to trigger a function that performs an action when the element is dragged. It is commonly used in web development to create drag-and-drop functionality and to enhance the user experience of a webpage.", + "onDragEnd": "The onDragEnd event in JavaScript is triggered when a user finishes dragging an element, such as an image or a text box, with a mouse or trackpad. This event can be used to update the element's position or to trigger a function that performs an action when the element is dropped. It is commonly used in web development to create drag-and-drop functionality and to enhance the user experience of a webpage.", + "onDragEnter": "The onDragEnter event in JavaScript is triggered when a user drags an element, such as an image or a text box, into a droppable area with a mouse or trackpad. This event can be used to update the appearance of the droppable area or to trigger a function that performs an action when an element is dragged into the area. It is commonly used in web development to create drag-and-drop functionality and to enhance the user experience of a webpage.", + "onDragExit": "The onDragExit event in JavaScript is triggered when a user drags an element, such as an image or a text box, out of a droppable area with a mouse or trackpad. This event can be used to update the appearance of the droppable area or to trigger a function that performs an action when an element is dragged out of the area. It is commonly used in web development to create drag-and-drop functionality and to enhance the user experience of a webpage.", + "onDragLeave": "The onDragLeave event in JavaScript is triggered when a user drags an element, such as an image or a text box, out of a droppable area with a mouse or trackpad. This event can be used to update the appearance of the droppable area or to trigger a function that performs an action when an element is dragged out of the area. It is commonly used in web development to create drag-and-drop functionality and to enhance the user experience of a webpage.", + "onDragOver": "The onDragOver event is triggered when a draggable element is being dragged over a drop target element. This event is used to specify what happens when an item is dragged over a drop target. The event provides information about the drag event, including the data being dragged and the position of the mouse pointer. The onDragOver event is commonly used to change the appearance of the drop target element to indicate that it can accept the data being dragged. This event is often used in conjunction with the onDrop event.", + "onDragStart": "The onDragStart event is triggered when the user starts dragging an element. This event is used to define what data should be dragged, and what should happen when the data is dropped. The onDragStart event is commonly used to set the data type of the drag event and to store data that will be used by the onDrop event. The event also provides information about the drag event, including the position of the mouse pointer.", + "onDrop": "The onDrop event is triggered when the user drops an element on a drop target. This event is used to define what should happen when the data is dropped. The event provides information about the data being dropped, including the data type and the position of the mouse pointer. The onDrop event is commonly used to retrieve the data that was set in the onDragStart event and to perform an action based on the data.", + "onMouseDown": "The onMouseDown event is triggered when the user presses a mouse button over an element. This event is commonly used to initiate an action that requires continuous input, such as dragging an element or resizing a window. The event provides information about the mouse button that was pressed and the position of the mouse pointer.", + "onMouseEnter": "The onMouseEnter event is triggered when the mouse pointer enters an element. This event is commonly used to change the appearance of the element when the mouse pointer is over it. The event provides information about the position of the mouse pointer.", + "onMouseLeave": "The onMouseLeave event is triggered when the mouse pointer leaves an element. This event is commonly used to change the appearance of the element when the mouse pointer is no longer over it. The event provides information about the position of the mouse pointer.", + "onMouseMove": "The onMouseMove event is triggered when the mouse pointer is moved over an element. This event is commonly used to track the position of the mouse pointer and to initiate an action based on the position of the mouse pointer. The event provides information about the position of the mouse pointer.", + "onMouseOut": "The onMouseOut event is triggered when the mouse pointer leaves an element. This event is commonly used to change the appearance of the element when the mouse pointer is no longer over it. The event provides information about the position of the mouse pointer.", + "onMouseOver": "The onMouseOver event is triggered when the mouse pointer enters an element. This event is commonly used to change the appearance of the element when the mouse pointer is over it. The event provides information about the position of the mouse pointer.", + "onMouseUp": "The onMouseUp event is triggered when the user releases a mouse button over an element. This event is commonly used to initiate an action that requires continuous input, such as dragging an element or resizing a window. The event provides information about the mouse button that was released and the position of the mouse pointer." + }, + "Selection": { + "onSelect": "The onSelect event is a user interface event that occurs when a user selects text or an element in a web page. This event is triggered when the user highlights or selects text using their mouse or keyboard. The onSelect event is commonly used to retrieve the selected text or element and perform some action on it, such as copying it to the clipboard or displaying a context menu. This event can be used in combination with other events, such as onClick, to provide a better user experience on web pages." + }, + "Touch": { + "onTouchCancel": "The onTouchCancel event is a touch event that occurs when the touch point is disrupted in some way, such as when the user moves their finger off the screen or the touch is interrupted by a system event. This event is triggered when the touch point is canceled and any actions associated with the touch should be stopped. The onTouchCancel event can be used to ensure that any ongoing actions are stopped when a touch is canceled, to prevent unexpected behavior in the user interface.", + "onTouchEnd": "The onTouchEnd event is a touch event that occurs when a touch point is removed from the screen, such as when the user lifts their finger or removes their stylus. This event is triggered when the touch point is lifted and any actions associated with the touch should be completed. The onTouchEnd event can be used to trigger an action when the user has finished interacting with a touch-based user interface element, such as a button or slider.", + "onTouchMove": "The onTouchMove event is a touch event that occurs when the user moves their finger or stylus across the screen. This event is triggered when the touch point moves and can be used to track the user's movement and update the user interface accordingly. The onTouchMove event is commonly used to implement touch-based user interface elements, such as sliders or scrollable areas.", + "onTouchStart": "The onTouchStart event is a touch event that occurs when the user touches the screen with their finger or stylus. This event is triggered when the touch point is first detected and can be used to initiate an action or start tracking the user's movement. The onTouchStart event is commonly used to implement touch-based user interface elements, such as buttons or menus." + }, + "UI": { + "onScroll": "The onScroll event is a user interface event that occurs when the user scrolls an element, such as a web page or a scrolling area within a web page. This event is triggered when the user scrolls the element and can be used to track the user's scrolling behavior and update the user interface accordingly. The onScroll event is commonly used to implement scroll-based user interface elements, such as infinite scroll or parallax effects." + }, + "Mouse Wheel": { + "onWheel": "The onWheel event is a user interface event that occurs when the user scrolls an element using a mouse wheel or trackpad. This event is triggered when the user scrolls the element and can be used to track the user's scrolling behavior and update the user interface accordingly. The onWheel event is commonly used to implement scroll-based user interface elements, such as zooming or scrolling through a large image or document." + }, + "Media": { + "onAbort": "The onAbort event is fired when the loading of a media resource is aborted. This event can occur for various reasons, such as the user interrupting the load, the browser aborting the load, or a network error preventing the resource from being loaded. The onAbort event can be used to handle any necessary cleanup or error handling when a media resource fails to load.", + "onCanPlay": "The onCanPlay event is fired when the browser determines that it can play the media resource, but is not yet ready to do so. This event is typically fired when the browser has enough of the media resource downloaded to begin playback, but not enough to ensure uninterrupted playback. The onCanPlay event can be used to indicate to the user that the media resource is ready to play, but may need additional time to buffer before playback can begin.", + "onCanPlayThrough": "The onCanPlayThrough event is fired when the browser determines that it can play the media resource without interruption. This event is typically fired when the browser has downloaded enough of the media resource to ensure uninterrupted playback. The onCanPlayThrough event can be used to indicate to the user that the media resource is ready to play and will not be interrupted.", + "onDurationChange": "The onDurationChange event is fired when the duration of the media resource changes. This can occur when the media resource is loaded, when the user seeks to a different position in the media resource, or when the media resource is modified dynamically. The onDurationChange event can be used to update the UI to reflect the current duration of the media resource.", + "onEmptied": "The onEmptied event is fired when the media resource is emptied, such as when the media resource is unloaded or when a new media resource is loaded. The onEmptied event can be used to handle any necessary cleanup or error handling when the media resource is no longer being used.", + "onEncrypted": "The onEncrypted event is fired when the media resource is encrypted. This event can be used to handle any necessary authentication or decryption of the media resource before playback can begin.", + "onEnded": "The onEnded event is fired when playback of the media resource has ended. This event can be used to handle any necessary cleanup or error handling when the media resource has finished playing.", + "onError": "The onError event is fired when an error occurs while loading or playing the media resource. This event can be used to handle any necessary error handling, such as displaying an error message to the user.", + "onLoadedData": "The onLoadedData event is fired when the browser has loaded the current frame of the media resource. This event can be used to indicate to the user that the media resource is being loaded and to update the UI to reflect the current state of the media resource.", + "onLoadedMetadata": "The onLoadedMetadata event is fired when the browser has loaded the metadata for the media resource. This includes information such as the duration of the media resource, the number of tracks, and any other relevant information. The onLoadedMetadata event can be used to update the UI to reflect the metadata of the media resource.", + "onLoadStart": "The onLoadStart event is fired when the browser begins loading the media resource. This event can be used to indicate to the user that the media resource is being loaded and to update the UI to reflect the current state of the media resource.", + "onPause": "The onPause event is fired when playback of the media resource is paused. This event can be used to handle any necessary cleanup or error handling when the media resource is paused.", + "onPlay": "The onPlay event is fired when the media playback has started or resumed after being paused. This event can be used to update the user interface to reflect the change in playback state, such as changing the play button to a pause button. It is a good practice to use this event to update the user interface instead of relying on the play button to toggle between play and pause.", + "onPlaying": "The onPlaying event is fired when the media playback is in progress. This event can be used to update the user interface to reflect the change in playback state, such as displaying the duration of the media and the current time. It is a good practice to use this event to update the user interface instead of relying on the play button to toggle between play and pause.", + "onProgress": "The onProgress event is fired when the media playback is in progress and the browser has new data available, such as when the buffer has been updated. This event can be used to update the user interface to reflect the current buffering status of the media. It is a good practice to use this event to update the user interface instead of relying on a progress bar to display the buffering status.", + "onRateChange": "The onRateChange event is fired when the playback rate of the media has changed, such as when the user adjusts the playback speed. This event can be used to update the user interface to reflect the change in playback speed.", + "onSeeked": "The onSeeked event is fired when the user has finished seeking the media to a new position. This event can be used to update the user interface to reflect the new position of the media.", + "onSeeking": "The onSeeking event is fired when the user is currently seeking the media to a new position. This event can be used to update the user interface to display the current position of the media as the user seeks to a new position.", + "onStalled": "The onStalled event is fired when the browser is unable to fetch media data for playback. This event can be used to notify the user that there is an issue with the media playback.", + "onSuspend": "The onSuspend event is fired when the media playback has been interrupted, such as when the user switches tabs or navigates away from the page. This event can be used to update the user interface to reflect the interruption in playback.", + "onTimeUpdate": "The onTimeUpdate event is fired when the current playback position of the media has changed. This event can be used to update the user interface to reflect the current position of the media.", + "onVolumeChange": "The onVolumeChange event is fired when the volume of the media has changed, such as when the user adjusts the volume. This event can be used to update the user interface to reflect the change in volume.", + "onWaiting": "The onWaiting event is fired when the media playback has been interrupted due to buffering, such as when the buffer is empty and needs to be refilled before playback can resume. This event can be used to update the user interface to reflect the buffering status of the media." + }, + "Image": { + "onLoad": "The 'onLoad' event is triggered when an image (or other external resource such as a script or style sheet) has finished loading on a web page. This event is commonly used to trigger actions that depend on the image being fully loaded, such as displaying a 'loading' animation until the image is ready or updating the layout of the page to accommodate the image's dimensions. The 'onLoad' event can be attached to an image element using JavaScript, and can also be used to trigger other JavaScript functions or events once the image has loaded. It's important to note that if an image fails to load due to a broken link or other error, the 'onError' event will be triggered instead of 'onLoad'.", + "onError": "The 'onError' event is triggered when an image (or other external resource such as a script or style sheet) fails to load on a web page. This event can be used to handle errors gracefully, such as displaying a fallback image or message, logging the error for debugging purposes, or attempting to reload the resource. The 'onError' event can be attached to an image element using JavaScript, and can also be used to trigger other JavaScript functions or events when an error occurs. It's important to note that not all errors will trigger the 'onError' event - for example, if an image is not found due to a 404 error, the browser may display its own error message instead of triggering the event. Additionally, some errors may not be caught by the 'onError' event if they occur during the initial page load or if the resource is cached by the browser." + }, + "Animation": { + "onAnimationStart": "The onAnimationStart event is triggered when an animation begins to play. This event is useful for controlling the animation or performing actions before the animation starts. The onAnimationStart event can be used with CSS animations or JavaScript animations.", + "onAnimationEnd": "The onAnimationEnd event is triggered when an animation comes to an end. This event is useful for controlling the animation or performing actions after the animation finishes. The onAnimationEnd event can be used with CSS animations or JavaScript animations.", + "onAnimationIteration": "The onAnimationIteration event is triggered when an animation reaches the end of an iteration. This event is useful for controlling the animation or performing actions after each iteration. The onAnimationIteration event can be used with CSS animations or JavaScript animations." + }, + "Transition": { + "onTransitionEnd": "onTransitionEnd is a term commonly used in web development and refers to an event that is triggered when a transition from one state to another is completed. This event occurs when a CSS transition or animation has finished playing. It allows developers to add custom functionality to their web pages, such as updating the page content or triggering other animations. The onTransitionEnd event is typically used in conjunction with other JavaScript functions and can be used to add interactivity to web pages. It is an important feature for creating dynamic and engaging user experiences on the web." } -] \ No newline at end of file + } \ No newline at end of file