JavaScript 이벤트 클릭을 트리거하는 방법

내 페이지에 하이퍼 링크가 있습니다. 테스트 목적으로 하이퍼 링크에서 여러 번의 클릭을 자동화하려고합니다. JavaScript를 사용하여 하이퍼 링크에서 50 회의 클릭을 시뮬레이션 할 수있는 방법이 있습니까?

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

JavaScript에서 onClick 이벤트 트리거를 찾고 있습니다.

HTML 요소를 한 번 클릭 하면 간단히 수행 할 수 element.click()있습니다. 대부분의 주요 브라우저는이 기능을 지원합니다 .

클릭을 두 번 이상 반복하려면 요소에 ID를 추가하여 고유하게 선택하십시오.

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

.click()for 루프를 통해 JavaScript 코드에서 메소드를 호출하십시오 .

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

최신 정보

이것은 오래된 대답이었습니다. 요즘에는 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();

does의 onclick함수를 정확하게 호출하는 l것입니다 l.onclick = myFunction;. 설정하지 않은 경우 l.onclick아무 것도 수행하지 않습니다. 대조적으로

 l.click();

클릭을 시뮬레이션하고 l.addEventHandler('click', myFunction);, HTML 또는 기타 방식으로 추가 여부에 관계없이 모든 이벤트 핸들러를 실행합니다 .

부정확하거나 공개되지 않은 부분 적용 가능성이 너무 많다는 것이 부끄럽습니다.

가장 쉬운 방법은 콘솔을 사용하는 Chrome 또는 Opera (예제에서는 Chrome을 사용함)를 사용하는 것입니다. 콘솔에 다음 코드를 입력하십시오 (일반적으로 한 줄로).

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/ - 셀레늄은 시스템을 테스트 자동화 된 웹 응용 프로그램입니다.

Firefox 플러그인 Selenium IDE를 사용하여 테스트를 만들 수 있습니다

이벤트 수동 발생

올바른 방법으로 이벤트를 수동으로 발생 시키려면 다른 브라우저에 대해 다른 방법을 사용해야 합니다 (앵커 요소가 될 위치 el.dispatchEvent또는 el.fireEvent위치) el. 두 가지 모두 전달할 Event 객체를 생성해야한다고 생각합니다.

완전히 정확하지 않고 더럽고 더러운 방법은 다음과 같습니다.

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