J'ai joint un événement à une zone de texte à l'aide de addEventListener
. Ça fonctionne bien. Mon problème est survenu lorsque j'ai voulu déclencher l'événement par programme à partir d'une autre fonction.
Comment puis-je le faire?
J'ai joint un événement à une zone de texte à l'aide de addEventListener
. Ça fonctionne bien. Mon problème est survenu lorsque j'ai voulu déclencher l'événement par programme à partir d'une autre fonction.
Comment puis-je le faire?
Réponses:
Vous pouvez utiliser fireEvent sur IE 8 ou inférieur, et dispatchEvent du W3C sur la plupart des autres navigateurs. Pour créer l'événement que vous souhaitez déclencher, vous pouvez utiliser soit createEvent
ou createEventObject
selon le 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);
event.eventName = "dataavailable";
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventName = "dataavailable";
event.eventType = "dataavailable";
element.fireEvent("on" + event.eventType, event);
}
eventName
ici?
Un 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 la documentation MDN .
Voir les tableaux de support pour EventTarget.dispatchEvent
et CustomEvent
.
detail
est une propriété de la Event
, alors affectez-lui toutes les données auxquelles vous souhaitez accéder à l'autre extrémité et accédez-y event.detail
. +1
Si vous ne voulez pas utiliser jQuery et n'êtes pas particulièrement préoccupé par la compatibilité descendante, 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 .
EDIT: Selon votre configuration, vous voudrez peut-être ajouter bubbles: true
:
let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));
CustomEvent
et le polyfill correspondant.
si vous utilisez jQuery, vous pouvez simplement faire
$('#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.
Si vous prenez en charge IE9 +, vous pouvez utiliser ce qui suit. Le même concept est incorporé dans You Might Not Need 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>
window.CustomEvent
existe, mais il ne peut pas être appelé en tant que constructeur: caniuse.com/#search=CustomEvent ;)
J'ai recherché des clics de tir, des mousedown et des mouseup sur mouseover en utilisant JavaScript. J'ai trouvé une réponse fournie par Juan Mendes . Pour la réponse cliquez ici .
Cliquez 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);
}
};
Juste pour suggérer une alternative qui n'implique pas la nécessité d'appeler manuellement un événement d'écoute:
Quoi que fasse votre écouteur d'événements, déplacez-le dans une fonction et appelez cette fonction à partir de l'écouteur d'événements.
Ensuite, vous pouvez également appeler cette fonction n'importe où ailleurs dont vous avez besoin pour accomplir la même chose que l'événement fait lorsqu'il se déclenche.
Je trouve cela moins "intensif en code" 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 un locus de mise au point normal perdu effectué par l'utilisateur.
element.click()
.
Modification de la réponse de @ Dorian 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
La réponse acceptée n'a pas fonctionné pour moi, aucune de celles de createEvent n'a fonctionné.
Ce qui a finalement fonctionné pour moi, c'est:
targetElement.dispatchEvent(
new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
}));
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
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 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éclenchez un événement ci-dessous:
var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');
Regarder l'événement:
dest.addEventListener('focus', function(e){
console.log(e);
});
J'espère que cela t'aides!
Vous pouvez utiliser le code ci-dessous pour déclencher un événement à l'aide de la méthode Element:
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);
}
};
}
Le moyen le plus efficace consiste à appeler addEventListener
directement la même fonction qui a été enregistrée .
Vous pouvez également déclencher un faux événement avec CustomEvent
et co.
Enfin, certains éléments tels que la <input type="file">
prise en charge d'une .click()
méthode.
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»
Utilisez l'appel d'événement jquery. Écrivez la ligne ci-dessous à l'endroit où vous souhaitez déclencher le changement d'un élément.
$("#element_id").change();
element_id est l'ID de l'élément dont onChange vous souhaitez déclencher.
Évitez l'utilisation de
element.fireEvent("onchange");
Parce qu'il a très moins de support. Référez-vous à ce document pour son support .
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
}
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");
document.getElementByClassName
n'existe pas. 2. document.getElementsByClassName
existe mais renvoie une liste. 3. cela ne fonctionne que pour quelques événements natifs sélectionnés. 4. Le dernier exemple déclenche un événement jQuery où aucun événement natif sous-jacent n'existe.