jQuery event handler fire order

HTML

<div id="main">
    <div id="wrapper">
        <button id="button">Click me</button>
    </div>
</div>

<div id="sandbox"></div>

<div id="consoleContainer">
     <h2>Console</h2>
     <div id="console"></div>
</div>

CSS

.coral {
    background: coral;
}
.lawngreen {
    background: lawngreen;
}
.peru {
    background: peru;
}
.plum {
    background: plum;
}
.salmon {
    background: salmon;
}
.tomato {
    background: tomato;
}
.skyblue {
    background: skyblue;
}
.snow {
    background: snow;
}
.springgreen {
    background: springgreen;
}
.papayawhip {
    background: papayawhip;
}
.olive {
    background: olive;
}
.orchid {
    background: orchid;
}
#console {
    background-color: #fff;
    background-image: linear-gradient(90deg, transparent 79px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
}
h4, p, ol {margin: 5px 0;}
h3 {margin: 25px 0 4px 0;}

JavaScript

var $main = $('#main');
var $wrapper = $('#wrapper');
var $button = $('#button');
var $drone = $('<div>');
var $console = $('#console');

// Direct events
$wrapper.on('click', null, 'olive', cloneDrone);
$button.on('click', null, 'coral', cloneDrone);
$button.on('click', null, 'lawngreen', cloneDrone);
$main.on('click', null, 'salmon', cloneDrone);
$main.on('click', null, 'plum', cloneDrone);
$button.on('click', null, 'peru', cloneDrone);
$main.on('click', null, 'tomato', cloneDrone);
// Delegate events
$main.on('click', 'button', 'skyblue', cloneDrone);
$main.on('click', 'button', 'snow', cloneDrone);
$main.on('click', '#wrapper', 'papayawhip', cloneDrone);
$main.on('click', 'button', 'springgreen', cloneDrone);
$wrapper.on('click', 'button', 'orchid', cloneDrone);

// Sequence: direct events first, delegate events on parent against self, direct event on parent, delegate event on grandparent against self, delegant event on grandparent against parent, direct event on grandparent

outputConsole($main);
outputConsole($wrapper);
outputConsole($button);

// done...
$button.prop('disabled', true);

function cloneDrone(e) {
    var name = e.data;
    $drone.clone().addClass(name).text(name).appendTo('#sandbox');
}

function outputConsole(element) {
    var $header = $('<h3></h3>');
    $header.text(element.attr('id').toUpperCase());
    $console.append($header);
    $console.append('<p>Delegate Count: ' + $._data(element[0], 'events').click.delegateCount + '</p>');
    $console.append('<h4>Events</h4>');
    var $list = $('<ol>').appendTo($console);
    $.each($._data(element[0], 'events').click, function (i, v) {
        if (typeof v == 'object') {
            $list.append('<li>' + v.data + (v.selector ? ' (delegate on ' + v.selector + ') ' : ' ') + '</li>');
        }
    });
}

// console.log($._data($main[0], 'events').click);