¿Cómo puedo activar un evento de JavaScript?

215

Tengo un hipervínculo en mi página. Estoy tratando de automatizar una serie de clics en el hipervínculo para fines de prueba. ¿Hay alguna forma de simular 50 clics en el hipervínculo usando JavaScript?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

Estoy buscando el activador de eventos onClick desde JavaScript.

usuario171523
fuente

Respuestas:

285

Realizar un solo clic en un elemento HTML: simplemente hazlo element.click(). La mayoría de los principales navegadores lo admiten .


Para repetir el clic más de una vez: Agregue una ID al elemento para seleccionarlo de forma exclusiva:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

y llame al .click()método en su código JavaScript a través de un bucle for:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();
instancia de mi
fuente
1
NB esto es para fines de prueba rápida. Para una solución de navegador cruzado más robusta, que cumpla con los estándares, vea la respuesta de Juan.
instancia de mí
3
No entiendo el bucle y esto no funcionó en dispositivos móviles.
im_benton
@im_benton: El ciclo fue para las necesidades específicas de OP. Si solo necesita activar un evento de clic, puede omitir la línea que comienza con for(.
rinogo
87

ACTUALIZAR

Esta fue una vieja respuesta. Hoy en día solo debes usar click . Para la activación de eventos más avanzada, use dispatchEvent .

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Respuesta original

Esto es lo que uso: http://jsfiddle.net/mendesjuan/rHMCy/4/

Actualizado para trabajar con IE9 +

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Tenga en cuenta que llamar fireEvent(inputField, 'change');no significa que realmente cambiará el campo de entrada. El caso de uso típico para disparar un evento de cambio es cuando establece un campo mediante programación y desea que se llame a los controladores de eventos, ya que la llamada input.value="Something"no activará un evento de cambio.

Juan mendes
fuente
Hola juan Su ejemplo no define JSUtil.NodeTypes.DOCUMENT_NODE
Kato
Sé que la pregunta es sobre hacer clic en los eventos, pero usted proporcionó un código genérico aquí y lo que puedo ver es que los eventos de cambio no se activarán (lo probé y esto realmente no funciona para tales eventos). Para desencadenar eventos de cambio, tuve que usar la función de disparo jquery.
Aleksander Lech
@AleksanderLech Solo disparar un evento no garantiza que la acción se llevará a cabo. Lo hace por clic, no por cambio. El caso de uso para eventos donde el cambio no funciona es cuando desea realizar un cambio en su valor, pero desea que se invoquen todos los controladores de eventos de cambio (ya sea que se hayan configurado con jQueryo no). Puedo proporcionar una ayuda más significativa si hace una nueva pregunta con el código exacto que estaba intentando pero no funcionaba.
Juan Mendes
Gracias por la rápida respuesta. Pude ejecutar el evento de cambio después de algunas modificaciones en su fragmento: 1) var node = document.getElementById (originalEvent.srcElement.id); 2) event.initEvent (eventName, verdadero, verdadero); // No sé por qué deshabilitaste el burbujeo para los eventos de cambio. Por favor, dígame lo que usted piensa.
Aleksander Lech
40

Qué

 l.onclick();

does es exactamente llamar a la onclickfunción de l, es decir, si ha configurado uno con l.onclick = myFunction;. Si no ha configurado l.onclick, no hace nada. A diferencia de,

 l.click();

simula un clic y dispara todos los controladores de eventos, ya sea que se agreguen l.addEventHandler('click', myFunction);, en HTML o de cualquier otra manera.

黄 雨伞
fuente
1
FWIW esto solo funciona a nivel de elemento. Si agrega un evento de clic al windowobjeto, no expondrá mágicamente una window.clickfunción.
James Donnelly
20

Me da mucha vergüenza que haya tanta aplicabilidad parcial incorrecta o no revelada.

La forma más fácil de hacerlo es a través de Chrome u Opera (mis ejemplos usarán Chrome) usando la consola. Ingrese el siguiente código en la consola (generalmente en 1 línea):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Esto generará el resultado requerido

htmldrum
fuente
12

.click()no funciona con Android (mira los documentos de Mozilla , en la sección móvil). Puede activar el evento de clic con este método:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

De esta publicación

Manolo
fuente
1
Intenté el clic de activación de jQuery pero descubrí que termina llamando a la devolución de llamada en lugar de enviar un evento real en el DOM. @manolo tu método es correcto.
Akshay Gundewar
" .click()no funciona con Android" En realidad, la última tabla dice "Compatibilidad desconocida".
Gaurang Tandon
8

Use un marco de prueba

Esto podría ser útil - http://seleniumhq.org/ - Selenium es un sistema de prueba automatizado de aplicaciones web.

Puede crear pruebas con el complemento de Firefox Selenium IDE

Disparo manual de eventos.

Para disparar eventos manualmente de la manera correcta, necesitará usar diferentes métodos para diferentes navegadores, ya sea el.dispatchEvento el.fireEventdónde elserá su elemento de anclaje. Creo que ambos requerirán la construcción de un objeto Evento para pasar.

La alternativa, no del todo correcta, rápida y sucia sería esta:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.
Nicole
fuente
7

IE9 +

function triggerEvent(el, type){
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
}

Ejemplo de uso:

var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

Fuente: https://plainjs.com/javascript/events/trigger-an-event-11/

Fatih Hayrioğlu
fuente
1

Advertencia justa:

element.onclick()No se comporta como se esperaba. Solo ejecuta el código dentro onclick="" attribute, pero no activa el comportamiento predeterminado.

Tuve un problema similar con el botón de radio que no se configuró en marcado, a pesar de que la onclickfunción personalizada funcionaba bien. Tuve que agregar radio.checked = "true";para configurarlo. Probablemente lo mismo ocurre y para otros elementos (después de a.onclick()que debería haber también window.location.href = "url";)

Arvigeus
fuente
De hecho, el uso onclick()significaría que el eventobjeto no será definido automáticamente por el navegador, por lo que los métodos comunes como event.stopPropagation()también estarán indefinidos.
Boaz
0

Llame a la función de activación en cualquier lugar y el botón hará clic.


<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}
Vinod Kumar
fuente