JQuery 触发器（'input'）不触发原生 JavaScript 输入事件

Question

我有一个代码需要在带有日期选择器的输入上手动触发输入事件。

代码如下：

input.on('apply.daterangepicker', function(e) {
    input.trigger('input');
});

input.on('input', function(e) {
    console.log('11111111111111111111');
});

document.getElementById('filter-created-at').addEventListener('input', function(e) {
    console.log('22222222222222222222');
});

第一个 jQuery 事件侦听器工作正常。但是第二个 pure JavaScript 没有捕捉到输入事件。不明白。如何使用纯 JavaScript addEventListener() 捕获来自 trigger() 的输入？

Answer 1

您可以使用Element#dispatchEvent触发输入事件。

document.getElementById('filter-created-at').addEventListener('input', function(e) {
  console.log('Regular input');
});
$('#filter-created-at').on('input', function(e) {
  console.log('jQuery input');
});
document.getElementById('filter-created-at').dispatchEvent(new Event('input', {
  bubbles: true
}))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="filter-created-at" />

JQuery 触发器（'input'）不触发原生 JavaScript 输入事件

JQuery trigger('input') does not fire native JavaScript input event

javascript

jquery

events

addeventlistener