Javascript addEventListener не запускается, но привязка JQuery срабатывает при фокусировке

Question

У меня есть ComboBox с пользовательским интерфейсом Kendo, и я осмотрелся, чтобы попытаться поймать событие с фокусировкой на нем, но смог найти только рабочий пример, используя раскрывающийся список пользовательского интерфейса kendo.Я изменил его для работы с комбинированным списком, но он никогда не работал.Так что у меня возникла идея, что, поскольку он использует текстовое поле, я просто поймал бы событие фокуса на этом.

Я мог бы поймать событие фокуса с помощью JQuery, как это ..

let stateCombobox = $('#acCustomerStates');
stateCombobox.bind('focusout', function(e){
    console.log("Focus out");
});

Но когда я попытался сделать это с помощью JavaScript, он не сработал, и я использую это ..

let stateCombobox = document.getElementById('acCustomerStates');
stateCombobox.addEventListener('focusout', function(){
    console.log("focus out");
});

Мой вопрос: почему происходит сбой addEventListener?

(function() {
  var data = [{
      text: "Item1",
      value: "1"
    },
    {
      text: "Item2",
      value: "2"
    },
    {
      text: "Item3",
      value: "3"
    }
  ];

  $("#acCustomerStates").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
  });

  // JQuery

  //let stateCombobox = $('#acCustomerStates');
  //stateCombobox.bind('focusout', function(e) {
  //  console.log("Focus out");
  //});

  //JavaScript

  //let stateCombobox = document.getElementById('acCustomerStates');
  //stateCombobox.addEventListener('focusout', function() {
  //  console.log("focus out");
  //});

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css" rel="stylesheet" />

<input id='acCustomerStates' />