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

exemple pratique:

// 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 anciens navigateurs polyfill et des exemples plus complexes, voir MDN docs .

Voir tableaux de soutien pour EventTarget.dispatchEvent et CustomEvent .

si vous utilisez jQuery, vous pouvez faire simple

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

et de les traiter avec des

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

où "[arg0, arg1, ..., argN] " signifie que ces args sont optionnels.

si vous supportez IE9+ the 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>

j'ai cherché click de mise à feu, mousedown et événement mouseup 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 version "démo" et ci-dessous 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);
    }
};

si vous ne voulez pas utiliser JQuery et ne vous souciez pas particulièrement de la compatibilité ascendante, 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 .

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

peu importe ce que fait votre écouteur d'événements, déplacez-le dans une fonction et appelez cette fonction à partir de l'écouteur d'événements.

alors, vous pouvez aussi appeler cette fonction n'importe où ailleurs que vous devez accomplir la même chose que l'événement fait quand il déclenche.

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

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

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

dans ce cas, l'événement n'est déclenché que si la valeur a vraiment été modifiée, tout comme vous le déclencheriez par le locus normal de mise au point perdu exécuté par l'utilisateur.

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

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

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

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

enfin, certains éléments tels que <input type="file"> supportent une méthode .click() .

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

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

cela déclenchera immédiatement un événement 'beforeinstallprompt '

vous pouvez utiliser cette fonction que j'ai compilée ensemble.

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

déclencher un événement ci-dessous:

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

Montre De L'Événement:

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

Espérons que cette aide!

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 
}

utilisez jQuery event call. Écrivez la ligne ci-dessous où vous voulez déclencher onChange de n'importe quel élément.

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

element_id est L'ID de l'élément dont vous voulez déclencher l'onChange.

éviter l'utilisation de

 element.fireEvent("onchange");

parce qu'il a beaucoup moins de soutien. Référez ce document pour son support .

Ce que vous voulez, c'est quelque chose comme ceci:

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

en utilisant jQuery, ce serait quelque chose comme ceci:

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