Knockout.js默认事件绑定与使用 jQuery 事件委托的自定义绑定 .on(） - 性能和收益

Knockout.js default event binding vs custom bindings using jQuery event delegation .on() - performance and gains?

本文关键字：事件 绑定 on 自定义 性能 收益 默认 js Knockout jQuery      更新时间：2023-09-26

使用自定义绑定和 $.on（） 对某些具有 ~500 行的数据列表的人机交互做出反应是否有一些性能或其他收益？

我想到了这个问题，因为我注意到淘汰事件是使用 bind（） 附加到元素的，这意味着它们在每个点击按钮上，还是我错了？

我有两个样品

附加到子项的第一个 - http://jsfiddle.net/dzjosjusuns/yStt7/- 事件

<div data-bind="text:head.id"></div>
<div id="container" data-bind="foreach:head.rows">
    <div class="item">
        <button data-bind="click:$root.head.deleteRow">remove</button>
        <span data-bind="text:name"></span>
    </div>
</div>

第二个 - http://jsfiddle.net/dzjosjusuns/NN3h8/- 事件仅通过自定义绑定附加到父级

<div data-bind="text:head.id"></div>
<div id="container" data-bind="foreach:head.rows, onRowDelete:head.deleteRow">
    <div class="item">
        <button>remove</button>
        <span data-bind="text:name"></span>
    </div>
</div>

定制绑定

ko.bindingHandlers.onRowDelete = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $('#container').on('click', '.item button', function (event) {
            valueAccessor().call(viewModel.head, ko.dataFor(event.target), event.target);
        });
    }
};

那么，执行此类自定义绑定是否有意义？

使用自定义绑定是否有一些性能或其他收益，以及 $.on（） 对某些数据列表上的人机交互做出反应 ~500 行？

是的。使用默认事件绑定，Knockout 会将一个处理程序附加到 500 行中的每一行。

如@nemesv所述，您可以使用 Ryan Neimeyer 的 Knockout.DelegatedEvents 库，该库将利用事件冒泡来有效地将处理程序附加到 DOM 元素事件。

相关文章：