Event delegation without jQuery

I created event delegation like concept which is present in jQuery. AFAIK, event delegation is used to register an event for an element which is supposed to be added dynamically. So, in jQuery we do the following:

$(document.body)
    .on('click', '.main', function(){ /* code here */ });
    .on('click', 'div.main', function(){ /* code here */ }); 
    .on('click', 'div#main.main', function(){ /* code here */ }); 
    .on('click', 'div#main.main[attr="1"]', function(){ /* code here */ });

So, instead of doing this event delegation in jQuery, I am doing using pure JavaScript. Here is my code:

var sb = (function () {
    var eventObject = {};
    document.body.addEventListener('click', function(e){
        console.dir(e.currentTarget);
        var el = e.target;
        var parent = el.parentElement;
        while(parent !== document.body){
            for(var item in eventObject){
                var elements = document.querySelectorAll(item);
                for(var i = 0, ilen = elements.length; i < ilen; i++){
                    if(el === elements[i]){
                        eventObject[item].call(el, e);
                        return;
                    }
                }
            }
            el = parent;
            parent = el.parentElement;
        }
    }, false);

    return {
        on: function(event, selector, callback){
            eventObject[selector] = callback;
            return sb;
        }
    }
})();

As you can see, in the above code, I have hard coded the click event (which is fine for now)

Now, I will use the above code like this:

sb
    .on('click', '.main', function(){ /* code here */ });
    .on('click', 'div.main', function(){ /* code here */ }); 
    .on('click', 'div#main.main', function(){ /* code here */ }); 
    .on('click', 'div#main.main[attr="1"]', function(){ /* code here */ });

This is working fine but I feel like I am overdoing things here in the above created plugin.