Q:

Bind event to document>element and addEventListener to element

Which is the logical/programming difference?  I was answering to a duplicated question so I tried to modify one of those repetive answers with a new approach (from my point of view, since it looks longer):
for (i = 1; i <= 10; i++) {
    var btn = document.createElement("BUTTON"),
        t = document.createTextNode("123");
    btn.appendChild(t);
    btn.setAttribute("class", "xyz");
    btn.setAttribute("value", "s" + i);
    btn.appendChild(t);

    document.body.appendChild(btn);
    $(document).bind('click', btn, function () {
    //btn.addEventListener('click', function() {
        alert(this.value);
    });
}

My "problem" is that btn.addEventListener('click', function(){}) works correctly: just one alert pop-up and binds to the created element and $(document).bind('click', btn,function(){..}) triggers the alert 11 times and doesn't bind to the just created element. 
Probably is a simple, stupid and useless question, but I'm pretty cusrios. 
JSFIDDLE

A:

The second option (btn in your case) is expected to be the CSS selector not an DOM node. 
So you can do it like this
$(document).bind('click', 'button.xyz', function () {
//btn.addEventListener('click', function() {
    alert(this.value);
});

