Week 11

JavaScript Week 11 - Event Handlers

• Method click(): Attaches an event handler to an HTML element, triggered when the user clicks on the element.
• Method mousedown(): Attaches an event handler to an HTML element. This method is executed when the left, middle, or right mouse button is pressed down, while the mouse is positioned over the HTML element.
• Method mouseup(): Attaches an event handler to an HTML element. This is triggered when the left, middle, or right mouse button is released, while the mouse is positioned over the HTML element.
• event.which Property: Used to determine which key or mouse button was pressed during an event. Specifically returns the key or mouse button code.

JavaScript Events - Keyboard

• keydown(): This event fires when a keyboard key is pressed down.
• keypress(): This event fires in response to a key being pressed. It's often used for tracking character input beyond simple key presses.
• keyup(): This event fires when a keyboard key is released.

JavaScript Events - Selecting Elements

• $(selector).keydown() / $(selector).keyup() / $(selector).keypress(): Used to attach event handlers based on keyboard actions for selected HTML elements. Attaches these functions specifically to the selected HTML element.
• $(selector).keydown(function) / $(selector).keyup(function) / $(selector).keypress(function): Similar to the previous methods, but includes a handler function to define actions executed when the event triggers. Attaches these event handler functions specifically to the selected HTML elements.

jQuery Methods - Mouse Events

• focus(): Used primarily with input elements, focus() occurs when an element gains focus.
• blur(): Often paired with focus(), blur() occurs when an element loses focus. Example: a user clicks away from a text field.
• on(): A versatile method used to attach event handlers for various events, including clicks, key presses, and more. It's frequently employed for managing multiple event types on a single element or multiple elements.
• click() function : Attaches a handler to an HTML element that executes when the HTML element is clicked (with a mouse). It's used for creating actions that happen only once.
• submit() Method: This is associated with <form> elements and triggers when a form is submitted, typically after a user submits data by clicking a submit button.
• change() method: This event fires when the value of an element is changed. Often associated with input fields, text areas, and select elements. Typically not used for elements like radio buttons or checkboxes directly for changing.
• unload() method: This event is triggered when a document or page is unloaded or navigates away from.
• resize() method: This event is triggered when the size of the browser window changes.
• scroll() method: This occurs when a scrollable element is scrolled.

jQuery Event Syntax

• .$(selector).action(function): This structure is fundamentally important in jQuery for attaching event handling. The action part refers specifically to the event type (click, submit, change, and so on).

• $(selector).action() : A simple syntax often used to execute an action on the select elements (for example Click Button). Does not have a function applied.

Additional Notes

• The on() method in jQuery is a generalized technique for handling many events across various elements.
• These methods are key parts of JavaScript and are often used to add interactive functionalities to websites.