javascript - 如何在 Chrome 控制台中使用 element.dispatchEvent

Question

我在 chrome devtools 中创建了一个代码片段，但是当我运行它时它会抛出此错误:

Uncaught TypeError: element.dispatchEvent is not a function
at changeValue (:12:11)
at :15:1

这是我的代码:

var script = document.createElement("script");
  script.setAttribute("src", "//code.jquery.com/jquery-latest.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);

const changeValue = (element, value) => {
  const event = new Event('input', { bubbles: true })
  element.value = value
  element.dispatchEvent(event)
}

changeValue($('#typeahead-input-to'), 'Syd');

有什么方法可以通过在 Chrome 控制台中运行此代码来使其工作吗？

Answer 1

const changeValue = (element, value) => {
  const event = new Event('input', { bubbles: true })
  element.value = value
  element.dispatchEvent(event)
}
debugger;
changeValue($("#typeahead-input-to")[0], 'Syd');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="typeahead-input-to"></input>