Jak mogę wywołać kliknięcie zdarzenia JavaScript

Mam link na mojej stronie. Próbuję zautomatyzować kilka kliknięć hiperłącza do celów testowych. Czy jest jakiś sposób na symulację 50 kliknięć hiperłącza za pomocą JavaScript?

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

Szukam wyzwalacza zdarzenia onClick z JavaScript.

Wykonanie jednego kliknięcia na elemencie HTML: Po prostu zrób element.click(). Obsługuje to większość głównych przeglądarek .

Aby powtórzyć kliknięcie więcej niż jeden raz: Dodaj identyfikator do elementu, aby go jednoznacznie wybrać:

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

i wywołaj .click()metodę w kodzie JavaScript za pomocą pętli for:

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

AKTUALIZACJA

To była stara odpowiedź. W dzisiejszych czasach powinieneś po prostu użyć kliknięcia . Aby uzyskać bardziej zaawansowane uruchamianie zdarzeń, użyj 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'));

Oryginalna odpowiedź

Oto, czego używam: http://jsfiddle.net/mendesjuan/rHMCy/4/

Zaktualizowano do pracy z 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);
    }
};

Zauważ, że dzwonienie fireEvent(inputField, 'change');nie oznacza, że ​​faktycznie zmieni pole wprowadzania. Typowy przypadek użycia do wywołania zdarzenia zmiany ma miejsce, gdy programowo ustawiasz pole i chcesz wywoływać procedury obsługi zdarzeń, ponieważ wywołanie input.value="Something"nie wyzwala zdarzenia zmiany.

Co

 l.onclick();

robi to właśnie wywoływanie onclickfunkcji l, to znaczy, jeśli ustawiłeś ją za pomocą l.onclick = myFunction;. Jeśli nie ustawiłeś l.onclick, nic nie robi. W przeciwieństwie,

 l.click();

symuluje kliknięcie i odpala wszystkie moduły obsługi zdarzeń, niezależnie od tego, czy zostały dodane za pomocą l.addEventHandler('click', myFunction);, w HTML, czy w jakikolwiek inny sposób.

Wstydzę się, że jest tak wiele nieprawidłowych lub nieujawnionych częściowych zastosowań.

Najłatwiej to zrobić za pomocą Chrome lub Opery (moje przykłady będą korzystać z Chrome) za pomocą konsoli. Wprowadź następujący kod do konsoli (zazwyczaj w 1 linii):

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

To wygeneruje wymagany wynik

.click()nie działa z Androidem (spójrz na dokumenty Mozilli , w sekcji mobilnej). Za pomocą tej metody możesz wywołać zdarzenie kliknięcia:

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

Z tego postu

Użyj środowiska testowego

Może to być pomocne - http://seleniumhq.org/ - Selenium to zautomatyzowany system testowania aplikacji internetowych.

Możesz tworzyć testy za pomocą wtyczki Firefox Selenium IDE

Ręczne odpalanie wydarzeń

Aby ręcznie uruchamiać zdarzenia we właściwy sposób, musisz użyć różnych metod dla różnych przeglądarek - albo gdzie el.dispatchEventlub el.fireEventgdzie elbędzie twój element Anchor. Wierzę, że oba będą wymagały zbudowania obiektu Event do przekazania.

Alternatywnym, nie do końca poprawnym, szybkim i brudnym sposobem byłoby:

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

Przykład użycia:

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

Źródło: https://plainjs.com/javascript/events/trigger-an-event-11/

Uczciwe ostrzeżenie:

element.onclick()nie zachowuje się zgodnie z oczekiwaniami. Działa tylko w obrębie kodu onclick="" attribute, ale nie wyzwala domyślnego zachowania.

Miałem podobny problem z tym, że przycisk opcji nie był ustawiony na sprawdzony, mimo że onclickfunkcja niestandardowa działała poprawnie. Musiałem dodać, radio.checked = "true";aby to ustawić. Prawdopodobnie to samo dotyczy innych elementów (po a.onclick()nich też powinno być window.location.href = "url";)

Proszę wywołać funkcję wyzwalania gdziekolwiek i przycisk kliknie.

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

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