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

수락 된 답변이 저에게 효과적이지 않았으며 createEvent 답변은 없었습니다.

결국 나를 위해 일한 것은 다음과 같습니다.

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

스 니펫은 다음과 같습니다.

const clickBtn = document.querySelector('.clickme');
const viaBtn = document.querySelector('.viame');

viaBtn.addEventListener('click', function(event) {
    clickBtn.dispatchEvent(
        new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

clickBtn.addEventListener('click', function(event) {
    console.warn(`I was accessed via the other button! A ${event.type} occurred!`);
});

<button class="clickme">Click me</button>

<button class="viame">Via me</button>

독서에서 : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

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