Wie kann ich einen JavaScript-Ereignisklick auslösen?

Ich habe einen Hyperlink auf meiner Seite. Ich versuche zu Testzwecken eine Reihe von Klicks auf den Hyperlink zu automatisieren. Gibt es eine Möglichkeit, mit JavaScript 50 Klicks auf den Hyperlink zu simulieren?

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

Ich suche nach einem onClick-Ereignisauslöser aus dem JavaScript.

Einen einzigen Klick auf ein HTML-Element ausführen : Einfach tun element.click(). Die meisten gängigen Browser unterstützen dies .

So wiederholen Sie den Klick mehrmals: Fügen Sie dem Element eine ID hinzu, um es eindeutig auszuwählen:

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

und rufen Sie die .click()Methode in Ihrem JavaScript-Code über eine for-Schleife auf:

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

AKTUALISIEREN

Dies war eine alte Antwort. Heutzutage sollten Sie nur Klick verwenden . Verwenden Sie dispatchEvent , um erweiterte Ereignisse auszulösen .

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

Ursprüngliche Antwort

Folgendes verwende ich: http://jsfiddle.net/mendesjuan/rHMCy/4/

Aktualisiert, um mit IE9 + zu arbeiten

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

Beachten Sie, dass ein Aufruf fireEvent(inputField, 'change');nicht bedeutet, dass das Eingabefeld tatsächlich geändert wird. Der typische Anwendungsfall für das Auslösen eines Änderungsereignisses besteht darin, dass Sie ein Feld programmgesteuert festlegen und möchten, dass Ereignishandler aufgerufen werden, da der Aufruf input.value="Something"kein Änderungsereignis auslöst.

Was

 l.onclick();

Dies ruft genau die onclickFunktion von auf l, dh wenn Sie eine mit festgelegt haben l.onclick = myFunction;. Wenn Sie nicht eingestellt haben l.onclick, tut es nichts. Im Gegensatz,

 l.click();

simuliert einen Klick und löst alle Ereignishandler aus, unabhängig davon, ob sie mit l.addEventHandler('click', myFunction);, in HTML oder auf andere Weise hinzugefügt wurden .

Ich schäme mich sehr, dass es so viele falsche oder unbekannte teilweise Anwendbarkeit gibt.

Der einfachste Weg, dies zu tun, ist über Chrome oder Opera (meine Beispiele verwenden Chrome) über die Konsole. Geben Sie den folgenden Code in die Konsole ein (in der Regel in einer Zeile):

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

Dies erzeugt das erforderliche Ergebnis

.click()funktioniert nicht mit Android (siehe Mozilla-Dokumente , im mobilen Bereich). Sie können das Klickereignis mit folgender Methode auslösen:

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

Aus diesem Beitrag

Verwenden Sie ein Testframework

Dies könnte hilfreich sein - http://seleniumhq.org/ - Selen ist ein automatisiertes Testsystem für Webanwendungen.

Sie können Tests mit dem Firefox-Plugin Selenium IDE erstellen

Manuelles Auslösen von Ereignissen

Um Ereignisse manuell auf die richtige Weise auszulösen, müssen Sie verschiedene Methoden für verschiedene Browser verwenden - entweder el.dispatchEventoder el.fireEventwo elsich Ihr Ankerelement befindet. Ich glaube, für beide muss ein Ereignisobjekt erstellt werden, um übergeben zu werden.

Die alternative, nicht ganz korrekte, schnelle und schmutzige Methode wäre folgende:

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

Anwendungsbeispiel:

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

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

Faire Warnung:

element.onclick()verhält sich nicht wie erwartet. Es führt nur den Code innerhalb aus onclick="" attribute, löst jedoch kein Standardverhalten aus.

Ich hatte ein ähnliches Problem mit dem Optionsfeld, das nicht aktiviert war, obwohl die onclickbenutzerdefinierte Funktion ordnungsgemäß ausgeführt wurde. Musste hinzufügen radio.checked = "true";, um es einzustellen. Wahrscheinlich gilt das auch für andere Elemente (nachdem a.onclick()es auch sein sollte window.location.href = "url";)

Bitte rufen Sie die Triggerfunktion an, wo und auf welche Schaltfläche geklickt wird.

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

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