KnockoutJS：处理事件捕获阶段

Question

让我们考虑使用 KnockoutJS 将通用事件绑定到 ViewModel 方法的标准方法：

<div data-bind="event: { mousedown: handler }"></div>

此代码会将handler 作为mousedown 事件的侦听器添加到<div>。与任何其他处理程序一样，它附加到事件的目标和冒泡阶段。

但是，我看不到一种方法可以将处理程序附加到事件的 capture phase，而无需在 Knockout JS 提供的 MVVM 模式之外手动调用 addEventListener。

是否可以在 Knockout JS 中使用 data-bind 将处理程序绑定到事件捕获阶段？

Answer 1

当您需要执行现有绑定处理程序无法执行的 DOM 操作时，您可以编写自定义绑定处理程序。这是捕获阶段事件处理程序的简单演示。您必须查看调试控制台才能看到输出。

ko.bindingHandlers.captureEvent = {
    init: function (element, valueAccessor) {
        var arg = valueAccessor();
        for (var eventName in arg) {
            element.addEventListener(eventName, arg[eventName], true);
        }
    }
};

vm = {
    handler: function (event) {
        console.debug(event.currentTarget.id);
    }
};

ko.applyBindings(vm);

#d1 {
    background-color: red;
    height: 35em;
    width: 35em;
}
#d2 {
    background-color: green;
    height: 25em;
    width: 25em;
}
#d3 {
    background-color: blue;
    height: 15em;
    width: 15em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="d1" data-bind="captureEvent: {mousedown: handler}">
    <div id="d2" data-bind="captureEvent: {mousedown: handler}">
        <div id="d3" data-bind="captureEvent: {mousedown: handler}"></div>
    </div>
</div>