Events
Events are actions that can be detected by your script. They are typically triggered by user interaction, such as clicking a button or moving the mouse, but they can also be triggered by other events, such as page loading or receiving data from a server.
To handle events in JavaScript, you can use event listeners. An event listener is a function that is executed in response to a specific event. For example, you can use an event listener to respond to a user clicking a button by displaying an alert message or by performing some other action.
Mouse Events
Mouse events are events that are triggered by user interaction with a mouse. In JavaScript, you can use event listeners to handle mouse events such as click, double click, mouse down, mouse up, mouse over, mouse out, mouse enter, mouse leave, and mouse move. Common mouse events are listed here:
- click: triggered when the user clicks on an element. It is typically used to handle clicks on buttons, links, or other interactive elements.
- mousedown: triggered when the user presses down on a mouse button while the cursor is over an element. It is typically used to initiate drag and drop operations or to select text.
- mouseup: triggered when the user releases a mouse button while the cursor is over an element. It is typically used to complete drag and drop operations or to deselect text.
- dblclick: triggered when the user double-clicks on an element. It is typically used to execute an action when the element is double-clicked.
- mouseover: when the user moves the mouse cursor over an element. It is typically used to highlight elements on hover or to display tooltips.
- mouseout: triggered when the user moves the mouse cursor out of an element. It is typically used to remove hover effects or to hide tooltips.
- scroll: triggered when the user scrolls the page or an element with a scrollbar. It is typically used to update the position of elements or to load new content as the user scrolls.
- unload: triggered when the user leaves the page or closes the browser window. It is typically used to perform cleanup tasks or to save data before the page is unloaded.
Each of these events can be handled using event listeners in JavaScript. For example, you can use the addEventListener method to attach an event listener to an element:
In this example, the addEventListener method is used to attach a click event listener to the element with the ID myElement. When the element is clicked, the function inside the addEventListener method will be executed.
Keyboard Events
Keyboard events are events that are triggered by user interaction with the keyboard.
- • keydown: triggered when the user presses a key on the keyboard. It is typically used to initiate actions or to control the behavior of an element.
- • keyup: triggered when the user releases a key on the keyboard. It is typically used to complete actions or to reset the state of an element.
- • keypress: triggered when the user presses and releases a key on the keyboard. It is typically used to handle text input or to execute actions when a specific key is pressed.
Form events
Form events are events that are triggered by user interaction with form elements such as input fields, select boxes, and buttons. In JavaScript, you can use event listeners to handle form events.
- • submit: triggered when the user submits a form. It is typically used to validate form input and to send the form data to a server.
- • reset: triggered when the user resets a form. It is typically used to reset form input to its default state.
- • focus: triggered when the user focuses on a form element, such as by clicking on it or tabbing to it. It is typically used to highlight the element or to display a placeholder.
- • blur: triggered when the user removes focus from a form element, such as by clicking away from it or tabbing to a different element. It is typically used to remove highlighting or to hide the placeholder.
- • change: triggered when the user changes the value of a form element, such as by typing in an input field or selecting an option from a select box. It is typically used to update the state of the form or to perform actions based on the new value.
Accordion
The accordion can be used to display information that is broken into the smaller discrete section, thus not making the viewer overwhelmed by lots of content at once. Each accordion container has a heading element that contains the content and by clicking on it, it opens the container and displays the content. At any given time, only one accordion can be open or visible to the user.