在 Firefox 中使用 javascript 创建 onchange 事件答案

【问题标题】：Create onchange event with javascript in Firefox在 Firefox 中使用 javascript 创建 onchange 事件
【发布时间】：2015-09-15 22:45:59
【问题描述】：

我一直在努力尝试在 Mozilla Firefox 中使用 java 脚本触发 onchange 侦听器。我在 Stack Overflow 上发现了很多关于此的帖子，但似乎没有任何东西适用于我的独特案例。

我使用这个有用的帖子 (JavaScript OnChange Listener position in HTML markup) 从 onchange 事件中创建了这个带有 onchange 侦听器的 HTML。这是我的代码：

<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
    if(window.addEventListener) {
        document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
    } else if (window.attachEvent){
        document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
    }

    function loadXMLDoc(){
       alert('It worked');
    }
}

function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>

我还将它保存为这个 jsfiddle（出于某种原因，我必须将它全部保存在一起才能工作，我无法将它分解为 js 和 html）。
https://jsfiddle.net/josephfedor42/crogL0zd/1/

如果你玩这个 jsfiddle，你会看到输入文本并按下回车键会触发监听器，并且会出现带有“It working”消息的弹出窗口。

但是如果按钮“点击我！”按下它只会更改文本框的值，并且不会调用 onchange 侦听器。

我意识到我可以很容易地向这个按钮添加一个 onchange 事件。但是我想通过在我的addTextCallListener() 函数中以编程方式/表面上使用javascript来触发侦听器。

我尝试过简单的东西，比如打电话 searchBox.onchange(); searchBox.focus(); searchBox.click();

并结合这些来添加和删除焦点。但这似乎不起作用。我发现了很多关于触发 onchange 事件的帖子，但在 Firefox 中没有任何效果。

任何帮助将不胜感激。

感谢您提供可能重复问题的链接。我之前检查过那个链接。
但我又试了一次。我从他们俩那里保存了 jsfiddle，但都没有工作。

我对 Dorian 回答的实现 https://jsfiddle.net/josephfedor42/zaakd3dj/

我对 Alsciende 答案的实现 https://jsfiddle.net/josephfedor42/xhs6L6u2/

【问题讨论】：

How to trigger event in JavaScript?的可能重复
另外，我正在寻找仅 JavaScript 的答案。再次感谢。
所以您只想手动触发事件？
我想知道您的问题是否不能精简为“为什么在 Firefox 中设置 input.value 不会触发 change 事件？”带有一个小示例代码，但我也不确定它是否是您想要的，所以我不会为您进行编辑，但请...尝试澄清一下。
我对它为什么不触发更改事件并不感兴趣。我想创建事件，以便代码执行我想要的操作。

标签： javascript html firefox

【解决方案1】：

^强调我的
根据关于the change event的mdn页面，

为<input>、<select> 和<textarea> 触发更改事件元素值的更改由提交时的元素用户。

和whatwg specs：

当输入和更改事件适用时（所有情况都是如此按钮以外的输入控件和具有 type 属性的控件隐藏状态），触发事件以指示用户拥有与控件交互。

因此，设置输入的值不是“用户提交”的操作，也不是“用户已与控件交互”的标志，因为它是由代码完成的。

因此，即使此事件的规范是kind of unclear，当您通过代码更改其值时，该事件也不应触发。

【讨论】：

因此，在您的情况下，最佳做法是在 addTextCallListener 函数内调用您附加到事件的回调
我同意当我更改文本框的值时不应触发 onchange 事件。但我想调用 onchange 事件并通过 JavaScript 来完成。其他用户事件可以通过 JavaScript 调用，例如 .click()，它模拟用户单击屏幕上的项目。
@Joe jsfiddle.net/crogL0zd/5 或者如果你真的想做坏事：jsfiddle.net/crogL0zd/6
这是有关更改事件的一些非常好的信息。谢谢凯多

【解决方案2】：

这样的事情应该可以工作：

function addTextCallListener() {
    var searchBox = document.getElementsByClassName("search-box")[0];
    searchBox.value = "Hello";

    //fire the event
    if (document.createEvent) {
        searchBox.dispatchEvent('change');
    } else {
        searchBox.fireEvent("onchange");
    }
}

【讨论】：

我不确定在标准之外触发已经存在的事件是否是个好主意
@Kaiido：我也不是，这就是为什么 OP 问题有-1。这只是另一种解决方案
嗯，我想知道我们是否不应该只用“为什么设置 input.value 不会触发 change 事件？”来编辑问题？
感谢您的建议，汤姆。不幸的是，它不起作用。我用你的代码更新了我的 jsfiddle：jsfiddle.net/josephfedor42/crogL0zd/4

【解决方案3】：

这是我需要添加到我的函数 addTextCallListener 的代码：

var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);

我更新了 jsfiddle。工作代码在这里https://jsfiddle.net/josephfedor42/crogL0zd/7/

【讨论】：

【解决方案4】：

在这部分将onchange替换为change：

document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);

【讨论】：

感谢您发布此信息。那是一个错字。我尝试将两者都更改为“onchange”，而听众甚至根本无法工作。 “改变”是正确的。这是这个难题的一部分......
Firefox 不知道 attachEvent 方法