jQuery Event Methods PDF

**Lesson 1. jQuery Event Method** **Basic syntax of jQuery** - With jQuery you select (query) HTML elements and perform \"actions\" on them. - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). A screenshot of a computer program...

**Lesson 1. jQuery Event Method** **Basic syntax of jQuery** - With jQuery you select (query) HTML elements and perform \"actions\" on them. - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). A screenshot of a computer program Description automatically generated **Jquery SELECTORS**  A screenshot of a computer Description automatically generated **Concept of jQuery Events** - All the different visitors\' actions that a web page can respond to are called events. - An event represents the precise moment when something happens.  **DOM events** A white and grey table with text Description automatically generated with medium confidence **jQuery Syntax For Event Methods** - In jQuery, most DOM events have an equivalent jQuery method. - To assign a click event to all paragraphs on a page, you can do this.  - The next step is to define what should happen when the event fires. - You must pass a function to the event: - The next step is to define what should happen when the event fires. - You must pass a function to the event: A screen shot of a computer Description automatically generated **[COMMONLY USED JQUERY EVENT METHODS]** **\$(document).ready()** - You might have noticed that all jQuery methods in our examples, are inside a document ready event. - This is to prevent any jQuery code from running before the document is finished loading (is ready). - It is good practice to wait for the document to be fully loaded and ready before working with it. - This also allows you to have your JavaScript code before the body of your document, in the head section.  **1. click() Method** - The click() method attaches an event handler function to an HTML element. - The function is executed when the user clicks on the HTML element. - The following example says: When a click event fires on a \ element; hide the current \ element: A screenshot of a computer code Description automatically generated **2. dblclick() Method** - -The dblclick() method attaches an event handler function to an HTML element. - -The function is executed when the user double-clicks on the HTML element.  **3. mouseenter() Method** - The mouseenter() method attaches an event handler function to an HTML element. - The function is executed when the mouse pointer enters the HTML element A screenshot of a computer program Description automatically generated **4. mouseleave() Method** - The mouseleave() method attaches an event handler function to an HTML element. - The function is executed when the mouse pointer leaves the HTML element.  **5. mousedown() Method** - The mousedown() method attaches an event handler function to an HTML element. - The function is executed when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element A screenshot of a computer program Description automatically generated **6. mouseup() Method** - The mouseup() method attaches an event handler function to an HTML element. - The function is executed when the left, middle or right mouse button is released, while the mouse is over the HTML element  **hover() Method** - The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. - The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element. A screenshot of a computer code Description automatically generated **Concept of Keyboard Event Methods** - The order of events related to the keydown event.  - Use the event.which property to return which keyboard key was pressed. **1**.**event.which property** - The event.which property returns which keyboard key or mouse button was pressed for the event. A screenshot of a computer code Description automatically generated **2. keydown() Method** - The keydown event occurs when a keyboard key is pressed down. - The keydown() method triggers the keydown event, or attaches a function to run when a keydown event occurs.  **3. keydown() Method** - Set the background color of an \ field when a keyboard key is pressed down. A screenshot of a computer program Description automatically generated **4. keyup() Method** - The keyup event occurs when a keyboard key is released. - The keyup() method triggers the keyup event, or attaches a function to run when a keyup event occurs. - Use the event.which property to return which key was pressed  - Set the background color of an \ field when a keyboard key is released. A screenshot of a computer program Description automatically generated **5. keypress() Method** - The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs. - The keypress event is similar to the keydown event. - The event occurs when a button is pressed down. - However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). - Use the keydown() method to also check these keys  - Count the number of key presses in an \ field. A screenshot of a computer program Description automatically generated **Learning Summary** **1. Mouse Event Methods** - All the different visitors\' actions that a web page can respond to are called events. - The click() method attaches an event handler function to an HTML element. - The dblclick() method attaches an event handler function to an HTML element. - The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. **2. Keyboard Event Methods** - The event.which property returns which keyboard key or mouse button was pressed. - The keydown event occurs when a keyboard key is pressed down. - The keyup event occurs when a keyboard key is released. - The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs.