Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

312
Visualizações
how to fire addEventListener when javascript change value

i have a div with some elements.

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

i added to my div the addEventListener like

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

it's working fine if i change values by keyboard. but, when i change a value from JS, nothing happen.

for example

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

what i have to do to fire my OnChange?

ok, i solved with

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

as suggest by "Sebastian Simon" thank you!

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

You can use dispatchEvent or fireEvent as required.

Check Link for further details.

Update

Check the below snippet for working sample

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

ok, i solved with

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

as suggest by "Sebastian Simon" thank you!

so, to be complete, the problem was about apply Select2 on the dropdown. Select2 doesn't fire native Onchange, but fires its. that mean "addEventListener" will not fired when your dropdown change value. to do that, i created on its event a textbox, appended to him, fired the Onchange texbox and than remove it.

for example:

            $('.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>
about 4 years ago · Juan Pablo Isaza Relatório

0

You can also try calling back the first function(used for alert) when entering values with different buttons .

Or you can create another alert when button is clicked to enter values

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>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda