Question Comment déclencher un événement en JavaScript?


J'ai joint un événement à une zone de texte en utilisant addEventListener. Ça fonctionne bien. Mon problème est survenu lorsque j'ai voulu déclencher l'événement par programmation à partir d'une autre fonction.

Comment puis-je le faire?


427
2018-03-22 08:41


origine


Réponses:


Vous pouvez utiliser fireEvent sur IE 8 ou inférieur, et w3c dispatchEvent sur la plupart des autres navigateurs. Pour créer l'événement que vous souhaitez déclencher, vous pouvez utiliser soit createEvent ou createEventObject en fonction du navigateur.

Voici un morceau de code explicite (du prototype) qui déclenche un événement dataavailable sur un 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);
  }

407
2018-03-22 08:55



Un exemple de travail:

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

Pour les navigateurs plus anciens polyfill et des exemples plus complexes, voir MDN docs.

Voir les tableaux de support pour EventTarget.dispatchEvent et CustomEvent.


267
2017-12-12 16:06



si vous utilisez jQuery, vous pouvez faire simple

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

et le manipuler avec

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

où "[arg0, arg1, ..., argN]" signifie que ces arguments sont facultatifs.


36
2017-07-06 01:31



Si vous prenez en charge IE9 +, vous pouvez utiliser ce qui suit. Le même concept est incorporé dans Vous pourriez ne pas avoir besoin de 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...'
});


Si vous utilisez déjà jQuery, voici la version jQuery du code ci-dessus.

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


23
2018-03-17 14:09



J'ai recherché le déclic de tir, mousedown et mouseup événement sur mouseover en utilisant JavaScript. J'ai trouvé une réponse fournie par Juan Mendes. Pour la réponse cliquez ici.

Cliquez sur ici est la démo en direct et ci-dessous est le 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);
    }
};

12
2017-10-29 16:57



Juste pour suggérer une alternative qui n'implique pas le besoin d'invoquer manuellement un événement d'écouteur:

Quoi que fasse votre écouteur d'événement, déplacez-le dans une fonction et appelez cette fonction à partir de l'écouteur d'événement.

Ensuite, vous pouvez également appeler cette fonction n'importe où ailleurs pour accomplir la même chose que l'événement lorsqu'il se déclenche.

Je trouve cela moins "intensif en code" et plus facile à lire.


8
2018-04-15 20:49



Si vous ne voulez pas utiliser JQuery et n'êtes pas particulièrement concerné par la rétrocompatibilité, utilisez simplement

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

Voir la documentation ici et ici.


7
2018-05-29 15:20



Je viens d'utiliser ce qui suit (semble être beaucoup plus simple):

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

Dans ce cas, l'événement est déclenché uniquement si la valeur a vraiment été modifiée, tout comme vous le déclenchez par le déplacement normal du locus de focalisation effectué par l'utilisateur.


6
2018-01-07 13:43



Modifié @ Dorian répondre travailler avec 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);

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

VOIR ÉGALEMENT:
https://caniuse.com/#feat=customevent


5
2018-03-05 19:00



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

4
2017-07-02 01:49



Le moyen le plus efficace est d'appeler la même fonction qui a été enregistrée avec addEventListener directement.

Vous pouvez également déclencher un faux événement avec CustomEvent et Cie.

Enfin, certains éléments tels que <input type="file"> soutenir un .click() méthode.


0
2017-11-20 22:50