javascript - ejemplos - ¿Cómo forzar programáticamente un evento onchange en una entrada?

javascript html

Question

¿Cómo forzar 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 disparar cualquier función de oyente, y eso no parece funcionar. Tampoco lo hace simplemente actualizar el atributo ''valor''.

Answer 1

Cree un objeto de Event y páselo al método dispatchEvent del elemento:

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

Esto desencadenará detectores de eventos independientemente de si se registraron llamando al método addEventListener o configurando la propiedad onchange del elemento.

Si desea que el evento burbujee, pase un segundo argumento al constructor del Event :

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

Información sobre la compatibilidad del navegador:

• dispatchEvent()
• Event()

Answer 2

En jQuery uso principalmente:

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

Answer 3

Por algún motivo, ele.onchange () arroja una expcepción de "método no encontrado" para mí en IE en mi página, así que terminé usando esta función desde el enlace proporcionado por 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 confirmaba que la llamada debería onchange () funcionar:

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

Editar: El motivo por el cual ele.onchange () no funcionó fue porque realmente no había declarado nada para el evento onchange. Pero el FireEvent todavía funciona.

Answer 4

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 a sus propios métodos de detección del navegador para que jQuery sea independiente.

Para usar esta función:

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

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

Answer 5

Usando JQuery puedes hacer lo siguiente:

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

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

Answer 6

si usas 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 que creo que extraño, lea lo que se debe hacer. Nunca he encontrado una manera de actualizar un elemento DOM de una manera que forzará un evento de cambio, lo que mejor está haciendo es tener un método de manejo de eventos por 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 de JavaScript que hará el cambio, solo hay que llamar a una línea adicional.

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

$get(''elementId'')._events

Te permitiría hacer algunos trabajos de estilo de reflexión para encontrar el manejador de eventos correcto para disparar.

Answer 7

ugh no usas eval para nada . Bueno, hay ciertas cosas, pero son extremadamente raras. Por el contrario, harías esto:

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

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