web-dev-qa-db-fra.com

Comment puis-je déclencher un événement JavaScript?

J'ai un hyperlien dans ma page. J'essaie d'automatiser un certain nombre de clics sur le lien hypertexte à 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.

javascriptjavascript-events
184
user171523

Effectuer un simple clic sur un élément HTML: Faites simplement element.click(). La plupart des navigateurs principaux 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 méthode .click() dans votre code JavaScript via une boucle for:

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

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

Mise à 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 de fireEvent(inputField, 'change'); ne signifie pas que le champ de saisie sera réellement modifié. 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 voulez que les gestionnaires d'événements soient appelés, car l'appel de input.value="Something" ne déclenchera pas d'événement de modification.

81
Juan Mendes

Quoi

 l.onclick();

est en train d'appeler exactement la fonction onclick de l, c'est-à-dire si vous en avez défini une avec l.onclick = myFunction;. Si vous n'avez pas défini 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.

39
黄雨伞

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

Le moyen le plus simple de procéder consiste à 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

20
htmldrum

.click() ne fonctionne pas avec Android (regardez documents mozilla , 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

11
Manolo

Utiliser un framework 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 d'événements

Pour déclencher manuellement les événements correctement, vous devrez utiliser différentes méthodes pour différents navigateurs: el.dispatchEvent ou el.fireEvent où el sera votre élément d'ancrage. Je crois que les deux nécessiteront la construction d'un objet Event pour pouvoir y 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.
8
Nicole

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/

6
Fatih Hayrioğlu

Avertissement juste:

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

J'avais un problème similaire avec le bouton radio non paramétré sur vérifié, même si la fonction personnalisée onclick fonctionnait correctement. Il a fallu 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 avoir aussi window.location.href = "url";)

1
Arvigeus