Quel est le moyen le plus sûr de déterminer si un objet Javascript est un événement?
Il est relativement bon d’explorer les objets et les méthodes que vous espérez trouver éventuellement dans des objets «inconnus».
Donc, supposons que vous avez obtenu un objet événement et testez-le avant d’agir dessus, par exemple.
if (event.target)
{
//looks like we're an event, hide the target
var e=$(event.target);
e.hide();
}
Il est important de noter que je ne suggère PAS que vous testiez 'cible' pour voir si c'est un événement: vous testez pour cible parce que vous êtes sur le point d'utiliser cette propriété. Ce à quoi je veux en venir, c'est que, au lieu d'essayer de déterminer si un objet est un événement, sondez l'objet pour voir s'il se comportera comme vous le souhaitez, utilisez ensuite ces comportements.
Un code comme celui-ci devrait se dégrader gracieusement sur des navigateurs avec un support différent, ou vous permettre de tirer parti des extensions spécifiques au navigateur, par exemple.
if (event.initKeyEvent)
{
//gecko 1.9+
event.initKeyEvent(...)
}
Que diriez-vous d'utiliser instanceof
? Tant que l'objet événement a été créé à l'aide du constructeur new Event()
, par exemple:
var e = new Event('click');
e instanceof Event; // true
Dans le cas du paramètre event dans les gestionnaires d'événements, bien que son type soit Object, il contient l'événement natif en tant que propriété. Vous pouvez donc l'utiliser à la place:
function myEventHandler(e) {
e.originalEvent instanceof Event; //true
}
Ici, il convient de noter que la valeur réelle peut varier en fonction du navigateur, en particulier lorsque l'événement est un événement tactile, voir ici et les références qu'il contient. Pas un problème dans mon cas.
Vous pouvez vérifier si l'objet a une propriété originalEvent;
event.hasOwnProperty('originalEvent')
par exemple:
// var event
var
isObject = typeof event ==='object', // is the given argument an object
isEvent = isObject ? event.hasOwnProperty('originalEvent') : false;
if(isEvent) {
// var `event` is an event!
} else {
// var event is NOT an event!
}
Cette fonction isEvent recherche dans le constructeur l'objet inconnu, le convertit en chaîne et recherche ensuite les types d'événements connus:
function isEvent(o){
//grab the constructor for the unknown object
var c=o.constructor;
//convert constructor to string
var s=c.toString();
/* declare IE RegExp pattern to match for 'object [Event]' */
if(document.all){
//set regExp pattern for IE
var ptr=/\[object Event\]/;
}else{
/* declare FIREFOX regExp pattern to match for 'object [*Event]' since it has
several event types:
UIEvent
KeyboardEvent
MouseEvent
FocusEvent
WheelEvent
CompositionEvent
StorageEvent
CustomEvent (Requires Gecko 6.0)
MutationEvent
Both Custom and Mutation events are not recognized prior to Gecko 6.0,
so if you want to use these, adjust regExp accordingly */
var ptr=/\[object (Keyboard|Mouse|Focus|Wheel|Composition|Storage)Event\]/;
}
return ptr.test(s); }
Ancienne question, mais apparemment, event.type
est compatible avec plusieurs navigateurs:
http://www.quirksmode.org/js/events_properties.html
RameshVel a ajouté ceci dans une modification à sa réponse, mais le vote a été fortement réduit.
Bien sûr, le moyen le plus sûr est de suivre les indications de la réponse acceptée, mais il m'est arrivé de vouloir supprimer l'objet s'il s'agit d'un événement.
Je ne sais pas s'il existe un moyen infaillible de le faire, mais je pense que votre meilleur coup est la frappe au canard.
Quoi qu'il en soit, en fonction de la situation, vous pouvez vérifier si un objet donné possède les propriétés attendues que vous souhaitez utiliser, tout comme Paul a souligné.
J'ai le même souci. Je me suis donc mis à prouver et je me suis approché de la solution.
function isEvent(a){
var txt, es=false;
txt = Object.prototype.toString.call(a).split('').reverse().join('');
es = (txt.indexOf("]tnevE") == 0)? true: false; // Firefox, Opera, Safari, Chrome
if(!es){
txt = a.constructor.toString().split('').reverse().join('');
es = (txt.indexOf("]tnevE") == 0)? true: false; // MSIE
}
return es;
}
J'ai testé cette fonctionnalité dans
J'espère que ça aide.