当javascript更改值时如何触发addEventListener [重复]答案

【问题标题】：how to fire addEventListener when javascript change value [duplicate]当javascript更改值时如何触发addEventListener [重复]
【发布时间】：2021-12-14 13:11:31
【问题描述】：

我有一个包含一些元素的 div。

<div>
<input value="" id="MyElement" type="text">
</div>

我将 addEventListener 添加到我的 div 中

    document.getElementById("MyDiv").addEventListener('change', function (event)
    {
        alert(event)
        var elem = event.target;
    });

如果我通过键盘更改值，它工作正常。但是，当我从 JS 更改一个值时，什么也没有发生。

例如

function test_1()
{
    tmp = document.getElementById("MyElement")
    tmp.value = "new value"
}

我必须做些什么来触发我的 OnChange？

好的，我解决了

document.getElementById("MyDiv").dispatchEvent(new Event("change"));

正如“塞巴斯蒂安·西蒙”所建议的那样谢谢！

【问题讨论】：

我试过了，但是触发了它的事件，没有进入 addEventListener
@elle0087 你具体尝试了什么？ Edit你的帖子。 document.getElementById("MyDiv").dispatchEvent(new Event("change")); 肯定可以正常工作。
@elle0087，可能你错过了new Event('change')。检查发布的答案中的工作示例。检查并让我知道是否需要进一步的帮助

标签： javascript html

【解决方案1】：

您可以根据需要使用dispatchEvent 或fireEvent。

查看Link了解更多详情。

更新

检查下面的 sn-p 以获取工作示例

document.getElementById("MyDiv").addEventListener('change', function (event) {
    alert(event)
    var elem = event.target;
});

document.getElementById("myInput").addEventListener('change', function (event) {
    alert(event)
    var elem = event.target;
});


function fnc() {
  document.getElementById("myInput").value = "New";
  var event = new Event('change');
    document.getElementById("myInput").dispatchEvent(event);
  document.getElementById("MyDiv").value = "Somethinig";
}

<div id="MyDiv">
  hi
</div>

<input type="text" id="myInput" placeholder="Text" />

<button onclick="fnc()">Click to fire event</button>

【讨论】：

【解决方案2】：

好的，我解决了

function test_1()
{
    document.getElementById("MyDiv").dispatchEvent(new Event("change"));
}

根据“Sebastian Simon”的建议，谢谢！

所以，完整地说，问题在于在下拉列表中应用 Select2。 Select2 不会触发本机 Onchange，但会触发它。这意味着当您的下拉列表更改值时不会触发“addEventListener”。为此，我在其事件上创建了一个文本框，附加到他身上，触发了 Onchange 文本框，然后将其删除。

例如：

            $('.js-example-basic-single').select2({dropdownAutoWidth : true});
            $('.js-example-basic-single').on('change', function (e)
            {
                tmp_div = document.createElement("input");
                e.target.appendChild(tmp_div)
                tmp_div.dispatchEvent(new Event("change"))
                e.target.removeChild(tmp_div)
            });
<div>
  <input value="" id="MyElement" type="text">
  <select id="cmb_UM1" class="js-example-basic-single select2-hidden-accessible" data-select2-id="select2-data-ctl00_Content_cmb_UM1">
    <option selected="selected" value="" title="" data-select2-id="select2-data-2-vplr"></option>
    <option value=" 1001171997" title=" 1001171997" data-select2-id="select2-data-12-gcgl"> 1001171997</option>
  </select>
</div>

【讨论】：

【解决方案3】：

您也可以尝试在使用不同按钮输入值时回调第一个函数（用于警报）。

或者您可以在单击按钮输入值时创建另一个警报

document.getElementById("MyElement").addEventListener('change', test_2)

function test_2() {
  alert(event)
  var elem = event.target;
};

document.getElementById("MyDiv").addEventListener('click', test_1)

function test_1() {
  tmp = document.getElementById("MyElement");
  tmp.value = "new value";
  test_2();
}

<div>
  <input value="" id="MyElement" type="text">
  <button id="MyDiv">Try me</button>
</div>

【讨论】：