JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div class="app">
  <div class="parent" data-bind="">
    <input type="text" data-bind="textInput:value">
    <button>first</button>
    <button>second</button>
  </div>

  <div class="other" data-bind="visible:focused">focused</div>
</div>

JavaScript

$ = document.querySelectorAll.bind(document);
var model = {
  focused: ko.observable(false),
	value: ko.observable('value')
}

console.log($('.parent')[0]);

$('.parent')[0].addEventListener('focus', function(e){
	console.log('focuse')
	model.focused(true);
}, true)
$('.parent')[0].addEventListener('blur', function(e){
	console.log(e)
	model.focused(false);
  console.log('blur')
}, true)

ko.applyBindings(model, $('.app')[0])