Javascript 在保留jQuery事件处理的同时向DOM添加批量项？

我正在向

添加一些批量

元素

以前，我做过类似的事情：

var playlistItemListUl = $('#PlaylistItemList ul');

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu: function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItem.appendTo(playlistItemListUl);
}

var playlitemlistul=$（“#playlitemlistul”）；
对于（变量i=0；i<1000；i++）{
var listItem=$（“
”{
“数据项id”：item.get（'id'），
上下文菜单：函数（事件）{
console.log（'contextmenu'，事件）；
},
单击：功能（事件）{
console.log（'click'，事件）；
}
});
listItem.appendTo（playlitemlistul）；
}

在本例中，listItem的click和contextmenu事件成功写入console.log。但是，它的速度非常慢，我想减少批量添加导致的延迟。因此，我重写了代码，只进行了一次DOM修改：

var playlistItemListUl = $('#PlaylistItemList ul');

var listItemsOuterHtml = [];

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu: function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItemsOuterHtml.push(listItem.prop('outerHTML'));
}

playlistItemListUl.append(listItemsOuterHtml.join(''));

var playlitemlistul=$（“#playlitemlistul”）；
var listItemsOuterHtml=[]；
对于（变量i=0；i<1000；i++）{
var listItem=$（“
”{
“数据项id”：item.get（'id'），
上下文菜单：函数（事件）{
console.log（'contextmenu'，事件）；
},
单击：功能（事件）{
console.log（'click'，事件）；
}
});
listItemsOuterHtml.push（listItem.prop（'outerHTML'）；
}
playlitemlistul.append（listItemsOuterHtml.join（“”））；

这减少了所需的DOM操作数量，但所有绑定良好的jQuery事件都被丢弃

---

这两种风格之间是否有一个有效的中间地带，允许我使用jQuery创建节点，而不是手工制作HTML，但可以避免不必要的DOM插入？

为什么不将这些单击事件添加到

playlitemlistul

中，让事件委派来处理事件？像这样：

playlistItemListUl.append(listItemsOuterHtml.join('')).on("click", "li", function(event) {
     console.log('click', event);
});

在这里，

单击

事件将绑定到

，并在单击时级联到

。而上的

则取代了
实时
、
绑定
和
委托
。如果要绑定多个事件

playlistItemListUl.append(listItemsOuterHtml.join('')).on({
"click": function(event) {
     console.log('click', event);
 },
 "contextmenu" : function (event) {
     console.log('contextmenu', event);
 }
}, "li");

如果你想让它在当前的设置中工作，你必须在
listItemsOuterHtml
中发送元素，而不仅仅是它的
outerHTML
。
为什么不把那些点击事件添加到
PlayItemListul
中，让事件委派来处理事件呢？像这样：

playlistItemListUl.append(listItemsOuterHtml.join('')).on("click", "li", function(event) {
     console.log('click', event);
});

在这里，
单击
事件将绑定到
，并在单击时级联到
。而

上的

则取代了
实时
、
绑定
和
委托
。如果要绑定多个事件

playlistItemListUl.append(listItemsOuterHtml.join('')).on({
"click": function(event) {
     console.log('click', event);
 },
 "contextmenu" : function (event) {
     console.log('contextmenu', event);
 }
}, "li");

如果你想让它在当前的设置中工作，你必须在
listItemsOuterHtml
中发送元素，而不仅仅是它的
outerHTML
。
你要把outerHTML推到一个数组中，你应该存储DOM元素，而不是HTML字符串

var playlistItemListUl = $('#PlaylistItemList ul'),
    listItems          = $([]);

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu  : function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItems = listItems.add(listItem);
}

playlistItemListUl.append(listItems);

var playlitemlistul=$（“#playlitemlistul”），
listItems=$（[]）；
对于（变量i=0；i<1000；i++）{
var listItem=$（“
”{
“数据项id”：item.get（'id'），
上下文菜单：函数（事件）{
console.log（'contextmenu'，事件）；
},
单击：功能（事件）{
console.log（'click'，事件）；
}
});
listItems=listItems.add（listItem）；
}
playlitemlistul.append（列表项）；
如果要将outerHTML推送到数组中，则应该存储DOM元素，而不是HTML字符串

var playlistItemListUl = $('#PlaylistItemList ul'),
    listItems          = $([]);

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu  : function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItems = listItems.add(listItem);
}

playlistItemListUl.append(listItems);

var playlitemlistul=$（“#playlitemlistul”），
listItems=$（[]）；
对于（变量i=0；i<1000；i++）{
var listItem=$（“
”{
“数据项id”：item.get（'id'），
上下文菜单：函数（事件）{
console.log（'contextmenu'，事件）；
},
单击：功能（事件）{
console.log（'click'，事件）；
}
});
listItems=listItems.add（listItem）；
}
playlitemlistul.append（列表项）；
这是否仍然会导致与@hungerpain的答案相同数量的DOM树交互？这是否仍然会导致与@hungerpain的答案相同数量的DOM树交互？