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

Question

J'ai attaché un événement à une zone de texte en utilisant addEventListener . Cela fonctionne bien. Mon problème est apparu lorsque j'ai voulu déclencher l'événement de manière programmatique à partir d'une autre fonction.

Comment puis-je le faire ?

Answer 1

J'ai cherché à déclencher les événements click, mousedown et mouseup au passage de la souris en utilisant JavaScript. J'ai trouvé une réponse fournie par Juan Mendes . Pour la réponse, cliquez sur aquí .

Cliquez sur aquí Voici la démo en direct et le code ci-dessous :

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

Answer 2

La réponse acceptée n'a pas fonctionné pour moi, aucune des réponses createEvent n'a fonctionné.

Ce qui a marché pour moi à la fin était :

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

En voici un extrait :

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>

De la lecture : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Answer 3

Modifié @Dorian's réponse pour 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);

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

VOIR AUSSI :
https://caniuse.com/#feat=customevent

Answer 4

Juste pour suggérer une alternative qui n'implique pas la nécessité d'invoquer manuellement un événement d'écoute :

Quelle que soit l'action de votre écouteur d'événements, placez-la dans une fonction et appelez cette fonction depuis l'écouteur d'événements.

Ensuite, vous pouvez également appeler cette fonction partout où vous avez besoin d'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.

Answer 5

J'ai simplement utilisé la méthode suivante (qui semble beaucoup plus simple) :

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

Dans ce cas, l'événement n'est déclenché que si la valeur a réellement été modifiée, tout comme vous le feriez en cas de perte du focus locus par l'utilisateur.