JS设置innerText/innerHTML是否触发input事件？循环与规范疑问

1. 使用JavaScript设置元素的innerText或innerHTML是否会触发input事件？ #

不会。input事件仅在用户直接操作导致元素内容/值变更时触发，通过JavaScript代码主动修改元素的innerText、innerHTML或表单元素的value属性，属于程序层面的变更，不会触发input事件。

2. 在元素的oninput事件处理器中更新该元素内容是否会触发无限循环？ #

不会触发无限循环，且所有现代浏览器（Chrome、Firefox、Safari、Edge等）均遵循此行为。

你测试的代码示例如下：

<html>
<body>
    <div id="editable" contenteditable="true">Original content</div>
    <script>
        const editableDiv = document.getElementById('editable');
        editableDiv.addEventListener('input', function(event) {
            // 在所有现代浏览器中均不会触发无限循环
            editableDiv.innerText += "!"
        });
    </script>
</body>
</html>

原因是：浏览器会区分内容变更的触发源——在input事件回调中通过JS修改内容时，浏览器判定这是程序驱动的变更，而非用户交互动作，因此不会再次触发input事件，也就不会形成无限循环。

关于“用户直接操作”的定义及官方说明 #

根据MDN文档的描述：

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox). The event also applies to elements with contenteditable enabled...

什么是“用户直接操作”？ #

用户直接操作指用户通过界面交互主动触发的动作，典型场景包括：

• 在可编辑元素、输入框中打字、删除内容
• 勾选/取消勾选复选框、单选按钮
• 通过下拉菜单选择选项
• 用户主动触发的粘贴、拖拽文本操作

而在input事件处理器中用JS设置innerText/innerHTML属于程序驱动的变更，完全不属于用户直接操作的范畴，所以不会触发input事件。

是否有明确的官方说明？ #

早期W3C UI Events规范的描述确实较为模糊，但目前所有主流浏览器都统一遵循“仅用户直接操作触发input事件，程序修改不触发”的行为逻辑。MDN的文档已明确这一行为准则，且浏览器厂商在实现上保持了高度一致，这可以视为事实上的标准行为。

内容的提问来源于stack exchange，提问作者Charles Holbrow