[javascript] 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);
    }
};

답변

리스너 이벤트를 수동으로 호출 할 필요가없는 대안을 제안하기 만하면됩니다.

이벤트 리스너가 무엇이든, 함수로 이동하고 이벤트 리스너에서 해당 함수를 호출하십시오.

그런 다음 이벤트 발생시와 동일한 작업을 수행해야하는 다른 곳에서 해당 함수를 호출 할 수도 있습니다.

나는 이것이 “코드 집약적”이 적고 읽기 쉽다는 것을 알게되었다.