Comment déclencher des événements en JavaScript?

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

Voir tables de soutien pour EventTarget.dispatchEvent et CustomEvent.

Si vous ne souhaitez pas utiliser jQuery et ne sont pas particulièrement préoccupés par rétro-compatibilité, il suffit d'utiliser:

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

Consultez la documentation ici et ici.

EDIT: Selon votre configuration, vous pouvez ajouter bubbles: true:

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

J'ai cherché pour le tir, cliquez sur, mousedown et mouseup événement à la souris à l'aide de JavaScript. J'ai trouvé une réponse à Juan Mendes. Pour la réponse, cliquez sur ici.

Cliquez sur ici est la démo live 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);
}
};

J'ai juste utilisé le suivant (semble être beaucoup plus simple):

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

Dans ce cas, l'événement est déclenché uniquement si la valeur était vraiment changé comme vous le feriez pour déclencher par une mise au point normale locus perdu effectuées par l'utilisateur.

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

Vous pouvez utiliser le code ci-dessous à feu événement à l'aide de la méthode des éléments:

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

JS:

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

HTML:

<input id="my_input" type="input" value="Hellow World">
<button id="my_button">Change Input</button>

var btn = document.getElementById('btn-test');
var event = new Event(null);
event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

ce sera imediattely déclencher un événement 'beforeinstallprompt'

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 
}