javascript - 将事件绑定(bind)到 document>element 并向 element 添加EventListener

Question

逻辑/编程差异是什么？我正在回答一个重复的问题，因此我尝试用一​​种新方法修改其中一个重复的答案(从我的 Angular 来看，因为它看起来更长):

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);
    });
}

我的“问题”是 btn.addEventListener('click', function(){}) 正常工作:只有一个警报弹出窗口并绑定(bind)到创建的元素和 $ (document).bind('click', btn,function(){..}) 触发警报 11 次，并且不绑定(bind)到刚刚创建的元素。
可能是一个简单、愚蠢且无用的问题，但我很好奇。
JSFIDDLE

Answer 1

$(document).bind('click', btn, function () {

btn 这里应该是一个选择器，我不认为它接受一个元素。 bind 已被弃用，您应该使用 on 代替

只需执行$(btn).on('click', function() {