淘汰赛：使用 useOnlyNativeEvents 和 Jquery 事件答案

【问题标题】：Knockout : using useOnlyNativeEvents along with Jquery event淘汰赛：使用 useOnlyNativeEvents 和 Jquery 事件
【发布时间】：2018-01-04 19:34:56
【问题描述】：

根据Documentation

Knockout 将使用 jQuery（如果存在）来处理 UI 事件。要禁用此行为并指示 Knockout 始终使用本机事件处理，您可以在调用 ko.applyBindings 之前在代码中设置以下选项

ko.options.useOnlyNativeEvents = true;

但设置上述属性并不会阻止使用 jquery 附加的事件。

HTML

<input id="test" type="text" data-bind="value:defaultVm.Temp,event:{change:defaultVm.ChangeEvt}"/>
<label data-bind="text:defaultVm.Temp" style="color:#ffff"/>

  defaultVm = function() {

    var temp = ko.observable("tests");
    
    var changeEvt = function(){
        alert("I was called");
    }

    return {
      Temp: temp,
      ChangeEvt : changeEvt
    }
  }();
  
  ko.options.useOnlyNativeEvents = true; // Doesnt change any behaviour
  ko.applyBindings(defaultVm);
     
     
$('#test').on('change',function()
{
    alert("I was called");
});

我的Fiddle 有什么问题，为什么设置属性ko.options.useOnlyNativeEvents = true; 不会改变默认行为？

【问题讨论】：

如果useOnlyNativeEvents = false，knout 内部使用 jquery 进行事件处理。如果你将它设置为 true，它可能会走纯 JavaScript 路线。它不会阻止您在viewModel 之外附加事件。你可以通过这个github issue

标签： jquery knockout.js

【解决方案1】：

useOnlyNativeEvents 选项不会阻止您附加任何事件处理程序。 Knockout 不能阻止 DOM api 被其他代码段使用...您必须在自己的代码中强制执行。

它做什么做什么：

事件绑定（以及扩展它的绑定，如click）将两个参数传递给它的监听器方法：$data 和event。不使用jQuery时，event的类型为Event。

使用 jQuery，类型变为jQuery.Event object

const logType = (d, e) => {
  console.log("Regular event:", e instanceof Event);
  console.log("jQuery event:", e instanceof jQuery.Event);
}

ko.applyBindings(
  { onClick: logType },
  document.querySelector("#btn1")
)

ko.options.useOnlyNativeEvents = true;
ko.applyBindings(
  { onClick: logType },
  document.querySelector("#btn2")
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button id="btn1" data-bind="click: onClick">is jQuery event</button>
<button id="btn2" data-bind="click: onClick">is regular event</button>

【讨论】：