Bagaimana saya bisa memicu klik acara JavaScript

Saya memiliki hyperlink di halaman saya. Saya mencoba mengotomatiskan sejumlah klik pada hyperlink untuk tujuan pengujian. Apakah ada cara Anda dapat mensimulasikan 50 klik pada hyperlink menggunakan JavaScript?

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

Saya mencari pemicu acara onClick dari JavaScript.

Melakukan satu klik pada elemen HTML: Cukup lakukan element.click(). Sebagian besar browser utama mendukung ini .

Untuk mengulangi klik lebih dari sekali: Tambahkan ID ke elemen untuk memilihnya secara unik:

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

dan panggil .click()metode dalam kode JavaScript Anda melalui for for:

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

MEMPERBARUI

Ini adalah jawaban lama. Saat ini Anda hanya perlu menggunakan klik . Untuk penembakan acara yang lebih lanjut, gunakan 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'));

Jawaban Asli

Inilah yang saya gunakan: http://jsfiddle.net/mendesjuan/rHMCy/4/

Diperbarui untuk bekerja dengan 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);
    }
};

Perhatikan bahwa panggilan fireEvent(inputField, 'change');tidak berarti itu benar-benar akan mengubah bidang input. Kasus penggunaan yang umum untuk memecat acara perubahan adalah ketika Anda menetapkan bidang secara terprogram dan Anda ingin penangan acara dipanggil karena panggilan input.value="Something"tidak akan memicu acara perubahan.

Apa

 l.onclick();

Apakah persis memanggil onclickfungsi l, yaitu, jika Anda telah menetapkan satu l.onclick = myFunction;. Jika Anda belum menyetel l.onclick, itu tidak melakukan apa-apa. Sebaliknya,

 l.click();

mensimulasikan klik dan menembakkan semua penangan acara, apakah ditambahkan dengan l.addEventHandler('click', myFunction);, dalam HTML, atau dengan cara lain apa pun.

Saya cukup malu bahwa ada banyak penerapan parsial yang salah atau tidak diungkapkan.

Cara termudah untuk melakukan ini adalah melalui Chrome atau Opera (contoh saya akan menggunakan Chrome) menggunakan Konsol. Masukkan kode berikut ke konsol (umumnya dalam 1 baris):

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

Ini akan menghasilkan hasil yang diperlukan

.click()tidak bekerja dengan Android (lihat dokumen mozilla , di bagian seluler). Anda dapat memicu acara klik dengan metode ini:

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

Dari pos ini

Gunakan kerangka kerja pengujian

Ini mungkin membantu - http://seleniumhq.org/ - Selenium adalah sistem pengujian otomatis aplikasi web.

Anda dapat membuat tes menggunakan plugin Firefox Selenium IDE

Penembakan acara secara manual

Untuk mem-api acara secara manual dengan cara yang benar, Anda perlu menggunakan metode yang berbeda untuk browser yang berbeda - baik el.dispatchEventatau di el.fireEventmana elakan menjadi elemen Anchor Anda. Saya percaya kedua hal ini akan membutuhkan pembangunan objek Acara untuk dilewati.

Alternatifnya, tidak sepenuhnya benar, cara cepat dan kotor adalah sebagai berikut:

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

Contoh penggunaan:

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

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

Peringatan yang adil:

element.onclick()tidak berperilaku seperti yang diharapkan. Itu hanya menjalankan kode di dalamnya onclick="" attribute, tetapi tidak memicu perilaku default.

Saya memiliki masalah serupa dengan tombol radio yang tidak disetel untuk diperiksa, meskipun onclickfungsi khusus berjalan dengan baik. Harus menambahkan radio.checked = "true";untuk mengaturnya. Mungkin hal yang sama berlaku dan untuk elemen lain (setelah a.onclick()itu harus ada juga window.location.href = "url";)

Silakan hubungi fungsi pemicu di mana saja dan tombol akan mengklik.

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

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