Wie löst man ein Ereignis in JavaScript aus?

Question

Ich habe ein Ereignis an ein Textfeld angehängt mit addEventListener . Es funktioniert gut. Mein Problem trat auf, als ich das Ereignis programmatisch von einer anderen Funktion aus auslösen wollte.

Wie kann ich das tun?

Answer 1

Anmerkung: Die initEvent Methode ist jetzt veraltet. Andere Antworten enthalten aktuelle und empfohlene Praktiken.

---

Sie können verwenden fireEvent en IE 8 oder niedriger, und W3C's dispatchEvent en más anderen Browsern. Um das auszulösende Ereignis zu erstellen, können Sie entweder createEvent o createEventObject je nach Browser.

Hier ist ein selbsterklärendes Stück Code (aus dem Prototyp), das ein Ereignis auslöst dataavailable an einem 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);
}

Answer 2

Ein praktisches Beispiel:

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

Bei älteren Browsern Polyfill und komplexere Beispiele, siehe MDN-Dokumente .

Siehe Unterstützungstabellen für EventTarget.dispatchEvent y CustomEvent .

Answer 3

Wenn Sie jQuery nicht verwenden möchten und sich nicht besonders um die Abwärtskompatibilität sorgen, verwenden Sie einfach:

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

Siehe die Dokumentation aquí y aquí .

EDITAR: Je nach Ihrer Einrichtung sollten Sie Folgendes hinzufügen bubbles: true :

let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));

Answer 4

Wenn Sie jQuery verwenden, können Sie einfach tun

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

und behandeln es mit

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

wobei "[arg0, arg1, ..., argN]" bedeutet, dass diese Args optional sind.

Answer 5

Anmerkung: Die initCustomEvent Methode ist jetzt veraltet. Andere Antworten enthalten aktuelle und empfohlene Praktiken.

---

Wenn Sie IE9+ unterstützen, können Sie folgendes verwenden. Das gleiche Konzept ist enthalten in Sie brauchen vielleicht kein 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...'
});

---

Wenn Sie bereits jQuery verwenden, finden Sie hier die jQuery-Version des obigen Codes.

$(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>