¿Cómo fuerzo programáticamente un evento onchange en una entrada?

¿Cómo fuerzo programáticamente un evento onchange en una entrada?

He intentado algo como esto:

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

Pero mi objetivo final es activar cualquier función de escucha, y eso no parece funcionar. Tampoco lo hace simplemente actualizar el atributo 'valor'.

Crea un Eventobjeto y pásalo al dispatchEventmétodo del elemento:

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

Esto activará detectores de eventos independientemente de si se registraron llamando al addEventListenermétodo o estableciendo la onchangepropiedad del elemento.

Si desea que el evento burbujee, debe pasar un segundo argumento al Eventconstructor:

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

Información sobre la compatibilidad del navegador:

• dispatchEvent ()
• Evento()

En jQuery utilizo principalmente:

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

uf, no uses eval para nada . Bueno, hay ciertas cosas, pero son extremadamente raras. Más bien, harías esto:

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

Busque aquí más opciones: http://jehiah.cz/archive/firing-javascript-events-properly

Por alguna razón, ele.onchange () está lanzando una excepción de "método no encontrado" en IE en mi página, así que terminé usando esta función desde el enlace que Kolten proporcionó y llamando a fireEvent (ele, 'change'), que funcionó :

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

Sin embargo, creé una página de prueba que confirmó que la llamada debería funcionar con onchange ():

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

Editar: La razón por la que ele.onchange () no funcionó fue porque en realidad no había declarado nada para el evento onchange. Pero el fireEvent todavía funciona.

Esta es la respuesta más correcta para IE y Chrome:

javascript=>

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

Tomado de la parte inferior de 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);
    }
}

Por supuesto, puede reemplazar las cosas $ .browser por sus propios métodos de detección de navegador para hacerlo independiente de jQuery.

Para utilizar esta función:

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

Esto básicamente activará el evento DOM real como si algo hubiera cambiado.

Si agrega todos sus eventos con este fragmento 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){...});

entonces puede usar element.on<EVENTNAME>()dónde <EVENTNAME>está el nombre de su evento, y eso llamará a todos los eventos con<EVENTNAME>

Para activar cualquier evento en Javascript.

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

si estás usando jQuery tendrías:

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

o MS AJAX:

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

O en el HTML sin formato del elemento:

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

Después de volver a leer la pregunta, creo que no leí lo que se debía hacer. Nunca encontré una manera de actualizar un elemento DOM de una manera que fuerce un evento de cambio, lo que mejor puede hacer es tener un método de controlador 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 ya está escribiendo un método JavaScript que hará el cambio, solo hay 1 línea adicional para llamar.

O, si está utilizando el marco de Microsoft AJAX, puede acceder a todos los controladores de eventos a través de:

$get('elementId')._events

Le permitiría hacer algunos trabajos de estilo de reflexión para encontrar el controlador de eventos adecuado para disparar.

Usando JQuery puede hacer lo siguiente:

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

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