events länge - Wie löst man ein Ereignis in JavaScript aus?




meta description (11)

Modified @ Dorian's answer auf die Arbeit mit IE:

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:
caniuse.com/#feat=customevent

Ich habe ein Ereignis an ein Textfeld mit addEventListener . Es funktioniert gut. Mein Problem entstand, als ich das Ereignis programmgesteuert von einer anderen Funktion auslösen wollte.

Wie kann ich es tun?


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

Wenn Sie IE9 + unterstützen, können Sie Folgendes verwenden. Das gleiche Konzept ist in Sie möglicherweise nicht erforderlich 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, ist 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>


Was Sie wollen, ist etwa so:

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

Mit jQuery wäre es etwa so:

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

Ich suchte nach feuerndem Klick-, mousedown- und mouseup-Ereignis beim Mouseover mit JavaScript. Ich habe eine Antwort von Juan Mendes gefunden . Für die Antwort klicken Sie here .

Klicken Sie here 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);
    }
};

Am effizientesten ist es, die gleiche Funktion addEventListener direkt bei addEventListener registriert wurde.

Sie können auch ein falsches Ereignis mit CustomEvent und co auslösen.

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


Verwenden Sie den jquery-Ereignisaufruf. Schreibe die untere Zeile, wo du onChange eines beliebigen Elements auslösen willst.

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

element_id ist die ID des Elements, dessen onChange ausgelöst werden soll.

Vermeiden Sie die Verwendung von

 element.fireEvent("onchange");

Weil es sehr wenig Unterstützung hat. Ziehen Sie dieses Dokument für seine support Rate.


Sie können fireEvent für IE 8 oder niedriger und w3c dispatchEvent für die meisten anderen Browser verwenden. Um das Ereignis zu erstellen, das createEventObject werden soll, können Sie createEvent oder createEventObject abhängig vom Browser verwenden.

Hier ist ein selbsterklärendes Stück Code (vom Prototyp), das ein Event- dataavailable auf einem element dataavailable element :

  var event; // The custom event that will be created

  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
  } else {
    event = document.createEventObject();
    event.eventType = "dataavailable";
  }

  event.eventName = "dataavailable";

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + event.eventType, event);
  }

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

Für ältere Browser, polyfill und komplexere Beispiele, siehe MDN-Dokumente .

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


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

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

und handle damit

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

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


Wenn Sie komplexe Objekte im Array haben, können Sie Filter verwenden? In Situationen, in denen $ .inArray oder array.splice nicht so einfach zu verwenden ist. Besonders, wenn die Objekte im Array möglicherweise flach sind.

Wenn Sie beispielsweise ein Objekt mit einem Id-Feld haben und das Objekt aus einem Array entfernen möchten:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});






javascript events javascript-events triggers addeventlistener