Introduced in jQuery 1.7, the .on() method serves as a unified interface for attaching event handlers to elements. It consolidates the functionality of older methods like .bind(), .live(), and .delegate(). This approach not only simplifies the API but also provides greater flexibility for handling standard browser events, namespaced events, and custom events.

Understanding Event Delegation

Event delegation is a powerful technique that leverages the bubbling nature of DOM events. Instead of attaching a listener to every individual element, you attach a single listener to a parent element. This is particularly useful when dealing with dynamic content or large lists.

Consider a scenario where you have a list with hundreds of items. A naive approach would bind an event to every single item:

$('.list-item').on('click', function() {
    console.log($(this).text());
});

This method has significant drawbacks: it consumes memory for every element and fails to recognize items added to the list after the initial binding. Event delegation solves both problems by binding the event to a stable parent container.

Native Implementation

Using vanilla JavaScript, you can achieve delegation by checking the event.target property within the parent's event listener:

const listContainer = document.getElementById('item-list');

listContainer.addEventListener('click', function(e) {
    const target = e.target;
    // Check if the clicked element matches our criteria
    if (target.tagName === 'LI' && target.classList.contains('list-item')) {
        performAction(target);
    }
});

function performAction(element) {
    console.log('Item clicked:', element.textContent);
}

jQuery Implementation

jQuery's .on() method streamlines this process significantly. The method signature for delegation is .on( events, selector, handler ).

• Events: A string containing one or more space-separated event types (e.g., "click mouseenter").
• Selector: A filter string to match the descendant elements that trigger the event.
• Handler: The function to execute when the event is triggered.

// Bind multiple events with delegation
$('#item-list').on('click mouseenter', '.list-item', function(event) {
    console.log('Interaction detected:', $(this).text());
});

// Using complex selectors
$('#item-list').on('click', '.list-item:nth-child(odd)', function() {
    $(this).toggleClass('highlight');
});

Implementing Custom Events

Beyond standard DOM events, .on() allows you to define and trigger custom events. This decouples the logic of "what happened" from "how to handle it," making your code more modular.

For example, imagine a scenario where a specific application state changes—such as a user entering a restricted zone. Instead of mixing the logic for detecting the entry with the logic for updating the UI, you can trigger a custom event.

// Setup listeners for custom events
$appContainer.on('user.entered', function() {
    console.log('User entered the zone');
    $(this).addClass('zone-active');
});

$appContainer.on('user.exited', function() {
    console.log('User left the zone');
    $(this).removeClass('zone-active');
});

// Logic to detect state and trigger events
if (isUserInZone(user)) {
    $appContainer.trigger('user.entered');
}

Interactive Example: Drag-to-Activate

The following example demonstrates custom events combined with mouse interactions. We will create a draggable element. When this element enters a specific "zone," it triggers a zone.activate custom event to illuminate the zone.

HTML Structure

<div id="playground">
    <div id="draggable-avatar"></div>
    <div id="activation-zone">
        <div id="status-light"></div>
    </div>
</div>

CSS Styling

body {
    width: 100%;
    overflow: hidden;
    margin: 0;
}

#playground {
    position: relative;
    width: 100%;
    height: 100vh;
}

#draggable-avatar {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #95a5a6;
    background-image: url('avatar.png');
    background-size: cover;
    cursor: grab;
}

#activation-zone {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    height: 250px;
    background-color: #2c3e50;
    border: 2px solid #7f8c8d;
    transition: background-color 0.3s ease;
}

#status-light {
    margin: 20px auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #e74c3c;
    box-shadow: 0 0 10px #c0392b;
    display: block;
}

/* Active state classes */
.zone-active {
    background-color: #8e44ad !important;
    border-color: #9b59b6 !important;
}

.light-on {
    background-color: #2ecc71 !important;
    box-shadow: 0 0 15px #27ae60 !important;
}

JavaScript Logic

$(document).ready(function() {
    const $zone = $('#activation-zone');
    const $avatar = $('#draggable-avatar');
    const $light = $('#status-light');
    
    let isZoneActive = false;

    // Custom Event Handlers
    $zone.on('zone.activate', function() {
        if (isZoneActive) return;
        isZoneActive = true;
        $light.addClass('light-on');
        $zone.addClass('zone-active');
    });

    $zone.on('zone.deactivate', function() {
        if (!isZoneActive) return;
        isZoneActive = false;
        $light.removeClass('light-on');
        $zone.removeClass('zone-active');
    });

    // Dragging Logic
    $avatar.on('mousedown', function(e) {
        e.preventDefault();
        $(document).on('mousemove', dragHandler);
    });

    $(document).on('mouseup', function() {
        $(document).off('mousemove', dragHandler);
    });

    function dragHandler(e) {
        const x = e.pageX - 40;
        const y = e.pageY - 40;
        
        $avatar.css({
            left: x + 'px',
            top: y + 'px'
        });

        // Collision Detection
        const avatarRect = $avatar[0].getBoundingClientRect();
        const zoneRect = $zone[0].getBoundingClientRect();

        // Trigger events based on position
        if (avatarRect.right > zoneRect.left) {
            $zone.trigger('zone.activate');
        } else if (avatarRect.right < zoneRect.left && isZoneActive) {
            $zone.trigger('zone.deactivate');
        }
    }
});