Comment puis-je déclencher un clic sur un événement JavaScript

J'ai un hyperlien dans ma page. J'essaie d'automatiser un certain nombre de clics sur l'hyperlien à des fins de test. Existe-t-il un moyen de simuler 50 clics sur l'hyperlien en utilisant JavaScript?

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

Je recherche un déclencheur d'événement onClick à partir de JavaScript.

Effectuer un seul clic sur un élément HTML: faites simplement element.click(). La plupart des principaux navigateurs le supportent .

Pour répéter le clic plusieurs fois: ajoutez un ID à l'élément pour le sélectionner de manière unique:

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

et appelez la .click()méthode dans votre code JavaScript via une boucle for:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

METTRE À JOUR

C'était une vieille réponse. De nos jours, vous devez simplement utiliser le clic . Pour un déclenchement d'événement plus avancé, utilisez 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'));

Réponse originale

Voici ce que j'utilise: http://jsfiddle.net/mendesjuan/rHMCy/4/

Mis à jour pour fonctionner avec 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);
    }
};

Notez que l'appel fireEvent(inputField, 'change');ne signifie pas qu'il modifiera réellement le champ de saisie. Le cas d'utilisation typique pour déclencher un événement de modification est lorsque vous définissez un champ par programme et que vous souhaitez que les gestionnaires d'événements soient appelés car l'appel input.value="Something"ne déclenchera pas d'événement de modification.

Quoi

 l.onclick();

fait appelle exactement la onclickfonction de l, c'est-à-dire si vous en avez défini une avec l.onclick = myFunction;. Si vous n'avez pas réglé l.onclick, cela ne fait rien. En revanche,

 l.click();

simule un clic et déclenche tous les gestionnaires d'événements, qu'ils soient ajoutés avec l.addEventHandler('click', myFunction);, en HTML ou de toute autre manière.

J'ai honte qu'il y ait tant d'applicabilité partielle incorrecte ou non divulguée.

La façon la plus simple de le faire est d'utiliser Chrome ou Opera (mes exemples utiliseront Chrome) à l'aide de la console. Entrez le code suivant dans la console (généralement sur 1 ligne):

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

Cela générera le résultat requis

.click()ne fonctionne pas avec Android (regardez les documents mozilla , dans la section mobile). Vous pouvez déclencher l'événement click avec cette méthode:

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 ce post

Utilisez un cadre de test

Cela pourrait être utile - http://seleniumhq.org/ - Selenium est un système de test automatisé d'applications Web.

Vous pouvez créer des tests en utilisant le plugin Firefox Selenium IDE

Déclenchement manuel des événements

Pour déclencher manuellement des événements de la bonne façon, vous devrez utiliser différentes méthodes pour différents navigateurs - soit el.dispatchEventou el.fireEventoù elsera votre élément d'ancrage. Je crois que ces deux nécessiteront la construction d'un objet Event pour passer.

L'alternative, pas tout à fait correcte, rapide et sale serait la suivante:

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

IE9 +

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

Exemple d'utilisation:

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

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

Avertissement juste:

element.onclick()ne se comporte pas comme prévu. Il exécute uniquement le code à l'intérieur onclick="" attribute, mais ne déclenche pas de comportement par défaut.

J'ai eu un problème similaire avec le bouton radio qui n'était pas réglé sur coché, même si la onclickfonction personnalisée fonctionnait bien. J'ai dû ajouter radio.checked = "true";pour le définir. Probablement la même chose et pour d'autres éléments (après a.onclick()il devrait y en avoir aussi window.location.href = "url";)

Veuillez appeler la fonction de déclenchement n'importe où et le bouton cliquera.

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

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