让我们考虑使用KnockoutJS将通用事件绑定到ViewModel方法的标准方法:
<div data-bind="event: { mousedown: handler }"></div>
此代码会将handler
作为mousedown
事件的监听者添加到<div>
。与任何其他处理程序一样,它附加到事件的目标和泡沫阶段。
但是,我没有看到将处理程序附加到事件的capture phase的方法,而没有在Knockout JS提供的MVVM模式之外手动调用addEventListener
。
是否可以使用Knockout JS中的data-bind
将处理程序绑定到事件捕获阶段?
答案 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>