Question

我一直在尝试使用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，您可以看到输入文本并按Enter键将触发监听器，弹出“It working”消息将出现。

但是如果按下“Click Me！”按钮，它只会改变文本框的值，并且不会调用onchange监听器。

我意识到我可以轻松地将onchange事件添加到此按钮。但是我希望在我的addTextCallListener()函数中使用javascript以编程/表面方式触发监听器。

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

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

任何帮助将不胜感激。

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

我实现了多利安的答案 https://jsfiddle.net/josephfedor42/zaakd3dj/

我实施了Alsciende的答案 https://jsfiddle.net/josephfedor42/xhs6L6u2/

Answer 1

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

针对<input>，<select>和<textarea>触发了更改事件元素值的更改由提交的元素用户即可。

和whatwg specs：

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

因此，设置输入的值不是“由用户提交”的操作，也不是“用户与控件交互”的符号，因为它是由代码创建的。

因此，即使此事件的规范为kind of unclear，也不应在按代码更改其值时触发事件。

Answer 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");
    }
}

Answer 3

以下是我需要添加到我的函数addTextCallListener中的代码：

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

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

Answer 4

在此部分中将onchange替换为change：

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

在Firefox中使用javascript创建onchange事件

4 个答案: