반응형
JavaScript에서 이벤트를 트리거하는 방법은 무엇입니까?
를 사용하여 텍스트 상자에 이벤트를 첨부했습니다 addEventListener. 잘 작동합니다. 다른 함수에서 프로그래밍 방식으로 이벤트를 트리거하려고 할 때 문제가 발생했습니다.
어떻게하니?
IE 8 이하에서는 fireEvent 를 , 대부분의 다른 브라우저에서는 W3C의 dispatchEvent 를 사용할 수 있습니다 . 실행하려는 이벤트를 작성하려면 브라우저에 따라 또는 브라우저에 따라 사용할 수 있습니다 .createEventcreateEventObject
여기서 이벤트를 실행 (시작)에서 코드 자명 조각 dataavailable온은 element:
var event; // The custom event that will be created
if(document.createEvent){
event = document.createEvent("HTMLEvents");
event.initEvent("dataavailable", true, true);
event.eventName = "dataavailable";
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventName = "dataavailable";
event.eventType = "dataavailable";
element.fireEvent("on" + event.eventType, event);
}
실제 예 :
// Add an event listener
document.addEventListener("name-of-event", function(e) {
console.log(e.detail); // Prints "Example of an event"
});
// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
구형 브라우저 폴리 필 및보다 복잡한 예는 MDN 문서를 참조하십시오 .
EventTarget.dispatchEvent및에 대한 지원 테이블을 참조하십시오 CustomEvent.
jQuery를 사용하지 않고 특히 이전 버전과의 호환성에 대해 걱정하지 않으려면 다음을 사용하십시오.
let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be
편집 : 설정에 따라 추가 할 수 있습니다 bubbles: true:
let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));
jQuery를 사용하면 간단하게 할 수 있습니다.
$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);
그것을 처리
$('#yourElement').on('customEventName',
function (objectEvent, [arg0, arg1, ..., argN]){
alert ("customEventName");
});
여기서 "[arg0, arg1, ..., argN]"은 이러한 인수가 선택 사항임을 의미합니다.
IE9 +를 지원하는 경우 다음을 사용할 수 있습니다. 동일한 개념에 포함되는 jQuery를 필요로하지 않을 수 당신 .
function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
el.attachEvent('on' + eventName, function() {
handler.call(el);
});
}
}
function triggerEvent(el, eventName, options) {
var event;
if (window.CustomEvent) {
event = new CustomEvent(eventName, options);
} else {
event = document.createEvent('CustomEvent');
event.initCustomEvent(eventName, true, true, options);
}
el.dispatchEvent(event);
}
// Add an event listener.
addEventListener(document, 'customChangeEvent', function(e) {
document.body.innerHTML = e.detail;
});
// Trigger the event.
triggerEvent(document, 'customChangeEvent', {
detail: 'Display on trigger...'
});이미 jQuery를 사용중인 경우 위 코드의 jQuery 버전이 있습니다.
$(function() {
// Add an event listener.
$(document).on('customChangeEvent', function(e, opts) {
$('body').html(opts.detail);
});
// Trigger the event.
$(document).trigger('customChangeEvent', {
detail: 'Display on trigger...'
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>JavaScript를 사용하여 mouseover에서 발생하는 click, mousedown 및 mouseup 이벤트를 검색했습니다. Juan Mendes가 제공 한 답변을 찾았습니다 . 답변을 보려면 여기를 클릭 하십시오 .
여기를 클릭 하십시오 라이브 데모이며 아래 코드입니다.
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);
var bubbles = eventName == "change" ? false : true;
event.initEvent(eventName, bubbles, 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
var event = doc.createEventObject();
event.synthetic = true; // allow detection of synthetic events
node.fireEvent("on" + eventName, event);
}
};
리스너 이벤트를 수동으로 호출 할 필요가없는 대안을 제안하기 만하면됩니다.
이벤트 리스너가 무엇이든, 함수로 이동하고 이벤트 리스너에서 해당 함수를 호출하십시오.
그런 다음 이벤트 발생시와 동일한 작업을 수행해야하는 다른 곳에서 해당 함수를 호출 할 수도 있습니다.
나는 이것이 "코드 집약적"이 적고 읽기 쉽다는 것을 알게되었다.
방금 다음을 사용했습니다 (훨씬 간단 해 보입니다).
element.blur();
element.focus();
이 경우 이벤트는 사용자가 수행하지 않은 일반적인 초점 궤적에 의해 트리거되는 것처럼 값이 실제로 변경된 경우에만 트리거됩니다.
IE와 작동하도록 @Dorian의 답변 을 수정했습니다 .
document.addEventListener("my_event", function(e) {
console.log(e.detail);
});
var detail = 'Event fired';
try {
// For modern browsers except IE:
var event = new CustomEvent('my_event', {detail:detail});
} catch(err) {
// If IE 11 (or 10 or 9...?) do it this way:
// Create the event.
var event = document.createEvent('Event');
// Define that the event name is 'build'.
event.initEvent('my_event', true, true);
event.detail = detail;
}
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
피들 : https://jsfiddle.net/z6zom9d0/1/
다음도 참조 :
https://caniuse.com/#feat=customevent
function fireMouseEvent(obj, evtName) {
if (obj.dispatchEvent) {
//var event = new Event(evtName);
var event = document.createEvent("MouseEvents");
event.initMouseEvent(evtName, true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
obj.dispatchEvent(event);
} else if (obj.fireEvent) {
event = document.createEventObject();
event.button = 1;
obj.fireEvent("on" + evtName, event);
obj.fireEvent(evtName);
} else {
obj[evtName]();
}
}
var obj = document.getElementById("......");
fireMouseEvent(obj, "click");
함께 컴파일 된이 기능을 사용할 수 있습니다.
if (!Element.prototype.trigger)
{
Element.prototype.trigger = function(event)
{
var ev;
try
{
if (this.dispatchEvent && CustomEvent)
{
ev = new CustomEvent(event, {detail : event + ' fired!'});
this.dispatchEvent(ev);
}
else
{
throw "CustomEvent Not supported";
}
}
catch(e)
{
if (document.createEvent)
{
ev = document.createEvent('HTMLEvents');
ev.initEvent(event, true, true);
this.dispatchEvent(event);
}
else
{
ev = document.createEventObject();
ev.eventType = event;
this.fireEvent('on'+event.eventType, event);
}
}
}
}
아래에서 이벤트를 트리거하십시오.
var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');
시청 이벤트 :
dest.addEventListener('focus', function(e){
console.log(e);
});
도움이 되었기를 바랍니다!
아래 코드를 사용하여 Element 메소드를 사용하여 이벤트를 발생시킬 수 있습니다.
if (!Element.prototype.triggerEvent) {
Element.prototype.triggerEvent = function (eventName) {
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(eventName, true, true);
} else {
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if (document.createEvent) {
this.dispatchEvent(event);
} else {
this.fireEvent("on" + event.eventType, event);
}
};
}
if (!Element.prototype.triggerEvent) {
Element.prototype.triggerEvent = function (eventName) {
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(eventName, true, true);
} else {
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if (document.createEvent) {
this.dispatchEvent(event);
} else {
this.fireEvent("on" + event.eventType, event);
}
};
}
var input = document.getElementById("my_input");
var button = document.getElementById("my_button");
input.addEventListener('change', function (e) {
alert('change event fired');
});
button.addEventListener('click', function (e) {
input.value = "Bye World";
input.triggerEvent("change");
});<input id="my_input" type="input" value="Hellow World">
<button id="my_button">Change Input</button>가장 효율적인 방법은 addEventListener직접 등록 된 동일한 기능을 호출하는 것 입니다.
CustomEvent및 공동 으로 가짜 이벤트를 트리거 할 수도 있습니다 .
마지막으로 일부 요소 <input type="file">는 .click()메소드 를 지원합니다 .
var btn = document.getElementById('btn-test');
var event = new Event(null);
event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);
이것은 '설치 전 프롬프트' 이벤트를 즉시 트리거합니다.
jquery 이벤트 호출을 사용하십시오. 요소의 onChange를 트리거 할 아래 행을 작성하십시오.
$("#element_id").change();
element_id 는 onChange를 트리거하려는 요소의 ID입니다.
사용을 피하십시오
element.fireEvent("onchange");
지원이 매우 적기 때문입니다. 지원에 대해서는이 문서를 참조하십시오 .
HTML
<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>
JS
// click event listener of the link element --------------
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
// code to fire
}
// function invoked by the button element ----------------
function fireLink(event) {
document.getElementById('myLink').click(); // script calls the "click" event of the link element
}
원하는 것은 다음과 같습니다.
document.getElementByClassName("example").click();
jQuery를 사용하면 다음과 같습니다.
$(".example").trigger("click");
참고 URL : https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
반응형
'Programing' 카테고리의 다른 글
| 파이썬을 사용하여 문자열의 각 문자를 반복 (0) | 2020.02.13 |
|---|---|
| 파이썬 모듈과 파이썬 패키지의 차이점은 무엇입니까? (0) | 2020.02.13 |
| 셀의 텍스트 양에 관계없이 테이블 열 너비를 일정하게 설정 하시겠습니까? (0) | 2020.02.13 |
| Mac OS X에 Maven 설치 (0) | 2020.02.12 |
| 플랫 테이블을 트리로 구문 분석하는 가장 효율적이고 우아한 방법은 무엇입니까? (0) | 2020.02.12 |