Як я можу викликати натиснення події JavaScript

У мене на своїй сторінці гіперпосилання. Я намагаюся автоматизувати декілька клацань по гіперпосиланню для тестування. Чи є спосіб, як ви можете імітувати 50 кліків на гіперпосилання за допомогою JavaScript?

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

Я шукаю тригер події onClick від JavaScript.

Виконання одного клацання на елементі HTML: Просто зробіть element.click(). Більшість основних браузерів підтримують це .

Щоб повторити клацання не один раз: Додайте ID до елемента, щоб однозначно вибрати його:

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

і викличте .click()метод у своєму коді JavaScript через цикл for:

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

ОНОВЛЕННЯ

Це була стара відповідь. Сьогодні вам слід просто скористатися клацанням . Для більш вдосконаленої стрільби подій використовуйте 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'));

Оригінальний відповідь

Ось що я використовую: http://jsfiddle.net/mendesjuan/rHMCy/4/

Оновлено для роботи з 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);
    }
};

Зауважте, що дзвінок fireEvent(inputField, 'change');не означає, що він фактично змінить поле введення. Типовий випадок використання для запуску події зміни - це коли ви програмно встановите поле і хочете, щоб викликали обробників подій, оскільки виклик input.value="Something"не викликає події зміни.

Що

 l.onclick();

робить це саме виклик onclickфункції l, тобто якщо ви встановили її l.onclick = myFunction;. Якщо ви не встановили l.onclick, він нічого не робить. У контрасті,

 l.click();

імітує клацання та запускає всі обробники подій, додані l.addEventHandler('click', myFunction);в HTML, чи будь-яким іншим способом.

Мені дуже соромно, що існує стільки неправильних або нерозкритих часткових застосувань.

Найпростіший спосіб зробити це через Chrome або Opera (мої приклади будуть використовувати Chrome) за допомогою консолі. Введіть у консоль такий код (як правило, в 1 рядок):

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

Це дасть необхідний результат

.click()не працює з Android (подивіться документи до мозілла , у розділі для мобільних пристроїв). Ви можете запустити подію натискання цим методом:

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

З цієї публікації

Використовуйте рамку тестування

Це може бути корисно - http://seleniumhq.org/ - Selenium - це система автоматизованого тестування веб-додатків.

Ви можете створити тести, використовуючи плагін Firefox Selenium IDE

Ручна стрілянина подій

Щоб вручну запустити події правильним способом, вам потрібно буде використовувати різні методи для різних браузерів - el.dispatchEventабо el.fireEventтам, де elбуде ваш елемент якоря. Я вважаю, що для обох цього буде потрібно побудувати об’єкт події для передачі.

Альтернативним, не зовсім правильним, швидким та брудним способом було б таке:

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

Приклад використання:

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

Джерело: https://plainjs.com/javascript/events/trigger-an-event-11/

Справедливе попередження:

element.onclick()не веде себе так, як очікувалося. Він запускає код лише всередині onclick="" attribute, але не запускає поведінку за замовчуванням.

У мене була аналогічна проблема, коли перемикач не встановлений для перевірки, навіть якщо onclickспеціальна функція працює нормально. Довелося додати, radio.checked = "true";щоб встановити його. Можливо, те саме стосується і інших елементів (після того, як a.onclick()вони повинні бути window.location.href = "url";)

Будь ласка, зателефонуйте до тригерної функції будь-де, де натисне кнопка.

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

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