내 페이지에 하이퍼 링크가 있습니다. 테스트 목적으로 하이퍼 링크에서 여러 번의 클릭을 자동화하려고합니다. 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/