Como forçar programaticamente um evento onchange em uma entrada?

Como forçar programaticamente um evento onchange em uma entrada?

Eu tentei algo como isto:

var code = ele.getAttribute('onchange');
eval(code);

Mas meu objetivo final é acionar qualquer função de ouvinte, e isso não parece funcionar. Também não atualiza apenas o atributo 'value'.

Crie um Eventobjeto e passe-o para o dispatchEventmétodo do elemento:

var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);

Isso acionará ouvintes de eventos, independentemente de terem sido registrados chamando o addEventListenermétodo ou configurando a onchangepropriedade do elemento.

Se você deseja que o evento borbulhe, é necessário passar um segundo argumento para o Eventconstrutor:

var event = new Event('change', { bubbles: true });

Informações sobre a compatibilidade do navegador:

• dispatchEvent ()
• Evento()

No jQuery eu uso principalmente:

$("#element").trigger("change");

ugh não use eval para nada . Bem, existem certas coisas, mas são extremamente raras. Em vez disso, você faria o seguinte:

document.getElementById("test").onchange()

Procure aqui mais opções: http://jehiah.cz/archive/firing-javascript-events-properly

Por alguma razão, ele.onchange () está lançando uma exceção de "método não encontrado" para mim no IE na minha página, então acabei usando essa função no link fornecido por Kolten e chamando fireEvent (ele, 'change'), que funcionava :

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

No entanto, criei uma página de teste que confirmou que a chamada deveria onchange () funcionar:

<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>

Edit: A razão pela qual ele.onchange () não funcionou foi porque eu realmente não havia declarado nada para o evento onchange. Mas o fireEvent ainda funciona.

Esta é a resposta mais correta para o IE e o Chrome:

javascript=>

var element = document.getElementById('xxxx');
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);

Retirado da parte inferior do QUnit

function triggerEvent( elem, type, event ) {
    if ( $.browser.mozilla || $.browser.opera ) {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem.dispatchEvent( event );
    } else if ( $.browser.msie ) {
        elem.fireEvent("on"+type);
    }
}

É claro que você pode substituir o material $ .browser pelos seus próprios métodos de detecção do navegador para torná-lo independente do jQuery.

Para usar esta função:

var event;
triggerEvent(ele, "change", event);

Isso basicamente dispara o evento DOM real como se algo tivesse realmente mudado.

Se você adicionar todos os seus eventos com este trecho de código:

//put this somewhere in your JavaScript:
HTMLElement.prototype.addEvent = function(event, callback){
  if(!this.events)this.events = {};
  if(!this.events[event]){
    this.events[event] = [];
    var element = this;
    this['on'+event] = function(e){
      var events = element.events[event];
      for(var i=0;i<events.length;i++){
        events[i](e||event);
      }
    }
  }
  this.events[event].push(callback);
}
//use like this:
element.addEvent('change', function(e){...});

então você pode simplesmente usar element.on<EVENTNAME>()onde <EVENTNAME>está o nome do seu evento e chamará todos os eventos com<EVENTNAME>

Para acionar qualquer evento em Javascript.

 document.getElementById("yourid").addEventListener("change", function({
    //your code here
})

se você estiver usando jQuery, você teria:

$('#elementId').change(function() { alert('Do Stuff'); });

ou MS AJAX:

$addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); });

Ou no HTML bruto do elemento:

<input type="text" onchange="alert('Do Stuff');" id="myElement" />

Depois de reler a pergunta, acho que não li o que deveria ser feito. Nunca encontrei uma maneira de atualizar um elemento DOM de maneira a forçar um evento de mudança. O melhor é fazer um método de manipulador de eventos separado, como este:

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Do Stuff!');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'something new';
  elementChanged();
}

Como você já está escrevendo um método JavaScript que fará a alteração, são necessárias apenas 1 linha adicional.

Ou, se você estiver usando a estrutura Microsoft AJAX, poderá acessar todos os manipuladores de eventos através de:

$get('elementId')._events

Isso permitiria que você fizesse algumas ações no estilo de reflexão para encontrar os manipuladores de eventos certos a serem disparados.

Usando o JQuery, você pode fazer o seguinte:

// for the element which uses ID
$("#id").trigger("change");

// for the element which uses class name
$(".class_name").trigger("change");