JS Events

Author - Sanket Mane

---

1. click event: allows you to respond to user clicks on elements, such as buttons or links.
   syntax:

   element.addEventListener('click', function(event){ // Do something when the event is clicked. });

2. mouseover event: allows you to respond to when the user hovers over an element, allowing you to show more information or change the element's appearance.
   syntax:

   element.addEventListener('mouseover', function(event){ // Do something when the mouse enters the element. });

3. mouseout event: allows you to respond to when the user stops hovering over an element, allowing you to hide additional information or change the element's appearance back.
   syntax:

   element.addEventListener('mouseout', function(event){ // Do something when the mouse leaves the element. });

4. keydown event: allows you to respond to keyboard input from the user, which can be usefol for creating keyboard shortcuts or interactive applications.
   syntax:

   element.addEventListener('keydown', function(event){ // Do something when the key is pressed. });

5. keyup event: allows you to respond when a key is released, which can be useful for creating effects or animations triggered by specific keyboard inputs.
   syntax:

   element.addEventListener('keyup', function(event){ // Do something when the key is released. });

6. submit event: allows you to respond to when a user submits a form, allowing you to handle the form data or perform validation checks.
   syntax:

   const myForm = document.querySelector('#myForm'); myForm.addEventListener('submit', function(event){ // Do something when the form is submitted. });

7. load event: allows you to respond when the page is fully loaded, which can be useful for running initialization code or performing operations that require all page resources to be available.
   syntax:

   window.addEventListener('load', function(event){ // Do something when the page finishes loading. });

8. error event: allows you to respond when an error occurs on the page, which can be useful for debugging or displaying error messages to the user.
   syntax:

   window.addEventListener('error', function(event){ // Do something when an error occurs on the page. });

9. resize event: allows you to respond when the window is resized, which can be useful for adjusting the layout or resizing elements on the page to fit the new dimensions.
   syntax:

   window.addEventListener('resize', function(event){ // Do something when the window is resized. });

10. scroll event: allows you to respond when the user scrolls the page, which can be useful for triggering effects or animations that depend on the scroll position, or for creating custom scrolling behavior.
    syntax:

    window.addEventListener('scroll', function(event){ // Do something when the user scrolls the page. });