[go: up one dir, main page]
Scribd
Upload
16 views4 pages

event handling

Uploaded by

gauharjahansd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views4 pages

event handling

Uploaded by

gauharjahansd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Two ways to bind an event to an element:

Using bind():
$(selector).bind(eventType,eventData,handlerFunction);
Event type: The javascript event type E.g: click,hover,keydown etc
Event data : The data to be passed to event handler function, if any.
Handler function: The operation to execute each time the event is fired

Using event method directly:


$(selector).click(handlerFunction);
$(selector).hover(handlerFunction);
Removing event handlers:
$(selector).unbind(eventType,handlerFunction);

Event handling in jQuery makes it easy to manage and respond to user interactions such as clicks, mouse movements, key presses,
form submissions, etc. jQuery provides several methods to attach event listeners to elements, trigger events programmatically, and
remove event listeners.

1. Basic Event Binding


You can bind an event handler (function) to a specific event type on one or more elements using the .on() method or shortcut
methods.

Using .on() Method

The .on() method is the most powerful and flexible way to attach event handlers. It can handle multiple events, event delegation,
and more.

$('#myButton').on('click', function() {
alert('Button clicked!'); });

This will trigger an alert when the button with the ID #myButton is clicked.

Shortcut Methods (for common events)

jQuery provides several shorthand methods for handling common events like click, focus, blur, keydown, etc. These methods are
simple and concise but internally use .on().

// Click event $('#myButton').click (function () {


alert('Button clicked!'); });
// Mouseover event $('#myDiv').mouseover (function () {
$(this).css ('background-color', 'lightblue'); });
// Keydown event
$('#inputField').keydown (function () {
console.log ('Key pressed!'); });

2. Event Handler Parameters


Event handler functions receive an event object as the first parameter, which contains useful information about the event, such as
the target element, the type of event, and other properties (e.g., mouse coordinates or keyboard keys).

$('#myButton').on('click', function(event) {
console.log('Event type: ' + event.type);
// 'click'
console.log('Element clicked: ' + event.target.id); // ID of the clicked element });

3. Event Delegation
Event delegation is a technique where you bind an event handler to a parent element, and the handler responds to events on its
child elements. This is useful when you have dynamic elements that may not exist when the page is initially loaded.

For example, if you dynamically add <li> elements to a list and want to attach a click event to them:

html
<ul id="myList"> <li>Item 1</li> <li>Item 2</li> </ul> <button id="addItem">Add
Item</button>
jquery

$('#myList').on('click', 'li', function() {


alert('List item clicked: ' + $(this).text()); });
$('#addItem').click(function() {
$('#myList').append('<li>New Item</li>'); // Dynamically add a list item });

In this case, the event handler is attached to #myList (the parent), and jQuery listens for clicks on its li children.

4. Multiple Event Types


You can bind multiple events to the same element by passing a space-separated list of event types.

$('#myButton').on ('click mouseenter', function() {


console.log ('Button clicked or mouse entered!'); });

This will trigger the same handler for both the click and mouseenter events.

5. Stopping Event Propagation


Sometimes, you may want to prevent an event from bubbling up the DOM (propagation) or from performing its default action (e.g.,
submitting a form when the submit button is clicked). Use the .stopPropagation() and .preventDefault() methods.

 event.stopPropagation(): Prevents the event from propagating to parent elements.


 event.preventDefault(): Prevents the default action (e.g., clicking a link, submitting a form).

$('#myLink').on('click', function(event) {
event.preventDefault();
// Prevent the default link action (navigation)
alert('Link clicked, but no navigation occurred!'); });
$('#parentDiv').on('click', function(event) { event.stopPropagation();
// Prevent click event from bubbling to parent });
6. Event Object Methods
The event object contains useful properties and methods for handling events. Here are a few common ones:

 event.target: The element that triggered the event.


 event.type: The type of event (e.g., click, keydown).
 event.pageX and event.pageY: The mouse coordinates (relative to the document).
 event.which: The key code for keyboard events (e.g., 13 for the Enter key).

Example of using some of these properties:

javascript
Copy code
$('#myButton').on('click', function(event) { console.log('Clicked element: ' +
event.target.id); // Get the clicked element console.log('Mouse position: (' + event.pageX +
', ' + event.pageY + ')'); // Mouse coordinates });

7. Removing Event Handlers


You can remove event handlers with .off().

Remove a specific event handler

$('#myButton').off('click'); // Removes the 'click' handler from the button

Remove all event handlers from an element:

$('#myButton').off(); // Removes all event handlers attached to #myButton

You can also remove event handlers that were attached with specific parameters:

function handleClick() {
alert ('Button clicked!'); }
// Attach event handler
$('#myButton').on ('click', handleClick);
// Remove specific handler
$('#myButton').off ('click', handleClick);

8. Form Events
jQuery also makes it easier to handle form-related events, like when a form is submitted, or when input fields change.

// When a form is submitted


$('form').on('submit', function(event) {
event.preventDefault();
// Prevent the default form submission
alert('Form submitted!'); });
// When an input field is changed
$('input').on('change', function() {
console.log('Input value changed to: ' + $(this).val()); });
9. Common jQuery Event Methods
Event Type Description
.click() Fired when an element is clicked.
.dblclick() Fired when an element is double-clicked.
.mouseenter() Fired when the mouse enters an element.
.mouseleave() Fired when the mouse leaves an element.
.keydown() Fired when a key is pressed down.
.keyup() Fired when a key is released.
.focus() Fired when an element receives focus.
.blur() Fired when an element loses focus.
.submit() Fired when a form is submitted.
.change() Fired when an input field value changes.

Example of jQuery Event Handling:


html
Copy code
<button id="myButton">Click me</button> <input type="text" id="textInput"
placeholder="Type something">
javascript
Copy code
// Click event $('#myButton').click(function() { alert('Button clicked!'); }); // Change event
for input field $('#textInput').change(function() { console.log('Input changed: ' + $
(this).val()); });

You might also like