jQuery - Event Delegation

by Jason Aden

HTML

<div id="notes">Notes...</div>
<ul>
    
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li id="four">Fourth</li>
</ul>

JavaScript

$(function(){
   
    var listItem, itemStatus, eventType;
    
    $('ul').on(
        'click mouseover', // event
        ':not(#four)', // delegate
        {status: 'important'}, // data
        function (e) { // handler
            
            console.log(this, e.target);
            
            listItem = 'Item: ' + e.target.textContent + '<br>';
            itemStatus = 'Status: ' + e.data.status + '<br>';
            eventType = 'Event: ' + e.type;
            
            $('#notes').html(listItem + itemStatus + eventType);
        }
   );
    
});