Wie kann ein Ereignis in JavaScript ausgelöst werden?

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

Wie kann ich es tun?

Sie können fireEvent in IE 8 oder niedriger und dispatchEvent von W3C in den meisten anderen Browsern verwenden. Um das Ereignis zu erstellen, das Sie auslösen möchten, können Sie entweder createEventoder createEventObjectje nach Browser verwenden.

Hier ist ein selbsterklärender Code (vom Prototyp), der ein Ereignis dataavailableauf Folgendes auslöst 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);
}

Ein Arbeitsbeispiel:

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

Informationen zu Polyfill für ältere Browser und komplexere Beispiele finden Sie in den MDN-Dokumenten .

Siehe Supporttabellen für EventTarget.dispatchEventund CustomEvent.

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

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

Siehe die Dokumentation hier und hier .

BEARBEITEN: Abhängig von Ihrem Setup möchten Sie möglicherweise Folgendes hinzufügen bubbles: true:

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

Wenn Sie jQuery verwenden, können Sie dies einfach tun

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

und damit umgehen

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

Dabei bedeutet "[arg0, arg1, ..., argN]", dass diese Argumente optional sind.

Wenn Sie IE9 + unterstützen, können Sie Folgendes verwenden. Das gleiche Konzept ist in You Might Not Need jQuery enthalten .

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>

Ich habe beim Mouseover mit JavaScript nach Klick-, Maus- und Mausereignissen gesucht. Ich habe eine Antwort von Juan Mendes gefunden . Für die Antwort klicken Sie hier .

Klicken Sie hier ist die Live-Demo und unten ist der Code:

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

Nur um eine Alternative vorzuschlagen, bei der ein Listener-Ereignis nicht manuell aufgerufen werden muss:

Was auch immer Ihr Ereignis-Listener tut, verschieben Sie es in eine Funktion und rufen Sie diese Funktion vom Ereignis-Listener auf.

Dann können Sie diese Funktion auch an einer anderen Stelle aufrufen, an der Sie dasselbe ausführen müssen, was das Ereignis beim Auslösen tut.

Ich finde das weniger "codeintensiv" und leichter zu lesen.

Ich habe gerade Folgendes verwendet (scheint viel einfacher zu sein):

element.blur();
element.focus();

In diesem Fall wird das Ereignis nur ausgelöst, wenn der Wert tatsächlich so geändert wurde, wie Sie ihn durch den vom Benutzer durchgeführten normalen Fokusortauslöser auslösen würden.

Die Antwort von @ Dorian für die Arbeit mit IE wurde geändert :

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

FIDDLE: https://jsfiddle.net/z6zom9d0/1/

SIEHE AUCH:
https://caniuse.com/#feat=customevent

Die akzeptierte Antwort hat bei mir nicht funktioniert, keine der createEvent-Antworten.

Was am Ende für mich funktioniert hat war:

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

Hier ist ein Ausschnitt:

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>

Aus dem Lesen: 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");

Sie könnten diese Funktion verwenden, die ich zusammen kompiliert habe.

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

Löse ein Ereignis aus:

var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');

Watch Event:

dest.addEventListener('focus', function(e){
   console.log(e);
});

Hoffe das hilft!

Sie können den folgenden Code verwenden, um ein Ereignis mit der Element-Methode auszulösen:

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>

Am effizientesten ist es, dieselbe Funktion aufzurufen, bei der registriert wurde addEventListener direkt .

Sie können auch ein gefälschtes Ereignis mit auslösen CustomEvent und co .

Schließlich unterstützen einige Elemente wie <input type="file">eine .click()Methode.

var btn = document.getElementById('btn-test');
var event = new Event(null);

event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

Dies löst sofort ein Ereignis 'vor der Installation' aus.

Verwenden Sie den Ereignisaufruf jquery. Schreiben Sie die folgende Zeile, in der Sie onChange eines Elements auslösen möchten.

$("#element_id").change();

element_id ist die ID des Elements, dessen onChange Sie auslösen möchten.

Vermeiden Sie die Verwendung von

 element.fireEvent("onchange");

Weil es sehr wenig Unterstützung hat. Siehe dieses Dokument für seine Unterstützung .

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 
}

Was Sie wollen, ist ungefähr so:

document.getElementByClassName("example").click();

Mit jQuery wäre es ungefähr so:

$(".example").trigger("click");