KnockoutJS:处理事件捕获阶段

时间:2015-11-18 16:40:53

标签: javascript knockout.js javascript-events event-handling

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

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

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

但是,我没有看到将处理程序附加到事件的capture phase的方法,而没有在Knockout JS提供的MVVM模式之外手动调用addEventListener

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

1 个答案:

答案 0 :(得分:4)

当您需要执行现有绑定处理程序不执行的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>