更改事件未使用 blur() 方法触发

Question

当用户在<input type="text">并移除焦点时， blur和change被触发。 但是，当我使用blur()方法在 JavaScript 中做同样的事情时，只会触发blur事件而不是change事件。 这种不一致是否有原因？

请参阅此示例代码（ jsfiddle ）：

<input type="text">
<button>Test</button>

const input = document.querySelector("input")

input.addEventListener("blur", () => console.log("blur"))
input.addEventListener("change", () => console.log("change"))

const button = document.querySelector("button")
button.addEventListener("click", () => {
    setTimeout(() => {
        input.focus()
    
        input.value = "something"
    
        input.blur()
    }, 1000)
})

单击按钮时，一秒钟后，它应该聚焦输入，更改值并模糊输入。 但是，只有blur事件被触发。 手动执行相同的操作将触发这两个事件。

我喜欢在change事件上触发一些验证逻辑，它在现实生活中工作得非常好，但是当我尝试在单元测试中重新创建工作流时，它失败了，我不确定为什么以及如何解决它。 所以另一个问题是：如何从 JavaScript 触发change事件？

Answer 1

您可以触发这样的事件：

const input = document.querySelector("input");
const event = new Event("change");

// blur the input
input.blur();

// dispatch change event manually
input.dispatchEvent(event);

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Answer 2

这个问题

当用户与元素交互时，会特别发出change事件。 这是有意为之。 @see HTMLElement：更改事件。

解决方案

使用合成事件来模拟用户在更改值时的交互： input.dispatchEvent(new Event("change"));

下面是一个工作示例，其逻辑在其自己的函数updateValueWithChangeEvent 。

 const input = document.querySelector("input") input.addEventListener("blur", () => console.log("blur")) input.addEventListener("change", () => console.log("change")) // Updates the value of an input and triggers the change Event. const updateValueWithChangeEvent = (input, value) => { if (input.value === value) return input.value = value input.dispatchEvent(new Event("change")); } // Updated example using function above const button = document.querySelector("button") button.addEventListener("click", () => { setTimeout(() => { // This will update value and trigger change event updateValueWithChangeEvent(input, "something") // This will trigger the blur event input.focus() input.blur() }, 1000) })

 <input type="text"> <button>Test</button>