jQuery Event Methods PDF

**Form Events Methods** **DOM events** A screenshot of a web page Description automatically generated **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. ![](media/ima...

**Form Events Methods** **DOM events** A screenshot of a web page Description automatically generated **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: A screen shot of a computer code Description automatically generated **focus() Method** - The focus event occurs when an element gets focus (when selected by a mouse click or by \"tab-navigating\" to it). - The focus() method triggers the focus event, or attaches a function to run when a focus event occurs. - This method is often used together with the blur() method.  focus() Method - Attach a function to the focus event. The focus event occurs when the \ field gets focus. A screenshot of a computer program Description automatically generated blur() Method - The blur event occurs when an element loses focus. - The blur() method triggers the blur event, or attaches a function to run when a blur event occurs. - This method is often used together with the focus() method.  - Attach a function to the blur event. The blur event occurs when the \ field loses focus. A screenshot of a computer program Description automatically generated submit() Method - The submit event occurs when a form is submitted. - This event can only be used on \ elements. - The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.  submit() Method - Display an alert when a form is submitted. A screenshot of a computer code Description automatically generated change() Method - The change event occurs when the value of an element has been changed (only works on \, \ and \ elements). - The change() method triggers the change event, or attaches a function to run when a change event occurs. - For select menus, the change event occurs when an option is selected.  change() Method - -Alert a text when an \ field is changed. - -For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed. A screen shot of a computer code Description automatically generated load() Method - The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. Use the on() or trigger() method instead. - Use.on(\"load\", handler) instead of.load(handler) and.trigger(\"load\") instead of.load().- The load() method attaches an event handler to the load event. - The load event occurs when a specified element has been loaded. - This event works with elements associated with a URL (image, script, frame, iframe), and the window object.  load() Method - Attach a function to the focus event. The focus event occurs when the \ field gets focus. A screenshot of a computer program Description automatically generated unload() Method - The unload() method was deprecated in jQuery version 1.8 and removed in version 3.0. Use the on() or trigger() method instead. - Use.on(\"unload\", handler) instead of.unload(handler) and.trigger(\"unload\") instead of.unload(). - The unload event occurs when the user navigates away from the page. - The unload event is triggered when: - a link to leave the page is clicked - a new URL is typed in the address bar - the forward or back buttons are used - the browser window is closed - the page is reloaded unload() Method - The unload() method specifies what happens when a unload event occurs. - The unload() method should only be used on the window object.- The unload event might work differently in different browsers. - Be sure to test this method in all browsers, before use.  resize() Method - The resize event occurs when the browser window changes size. - The resize() method triggers the resize event, or attaches a function to run when a resize event occurs. A white background with green text Description automatically generated resize() Method - Count the number of times the browser window is resize  scroll() Method - The scroll event occurs when the user scrolls in the specified element. - The scroll event works for all scrollable elements and the window object (browser window). - The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs. A white background with green text Description automatically generated scroll() Method - Count the number of times the scroll is used for an element.  on() Method - The on() method attaches one or more event handlers for the selected elements and child elements. - As of jQuery version 1.7, the on() method is the new replacement for the bind(), live() and delegate() methods. - This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base. - **Note: Event handlers attached using the on() method will work for both current and FUTURE elements (like a new element created by a script).** - Tip: To remove event handlers, use the off() method. - Tip: To attach an event that only runs once and then removes itself, use the one() method. on() Method - Attach a click event to the \ element. A screenshot of a computer program Description automatically generated on() Method - Attach multiple event handlers to a \ element.  Learning Summary 1\. Form Events Methods - The focus() method triggers the focus event, or attaches a function to run when a focus event occurs. - The blur() method triggers the blur event, or attaches a function to run when a blur event occurs. - The submit() method triggers the submit event, or attaches a function to run when a submit event occurs. - The change() method triggers the change event. 2\. Document/Window Events Methods - The load() method attaches an event handler to the load event. - The unload() method specifies what happens when a unload event occurs. - The resize() method triggers the resize event, or attaches a function to run when a resize event occurs. - The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs.