web-dev-qa-db-fra.com

jQuery: Comment obtenir l'objet événement dans une fonction de gestionnaire d'événements sans le transmettre en tant qu'argument?

J'ai un attribut onclick sur mon lien:

<a href="#" onclick="myFunc(1,2,3)">click</a>

Cela pointe vers ce gestionnaire d'événements en JavaScript:

function myFunc(p1,p2,p3) {
    //need to refer to the current event object:
    alert(evt.type);        
}

Puisque l'objet événement "evt" n'est pas passé à un paramètre, est-il toujours possible d'obtenir cet objet?

J'ai essayé window.event Et $(window.event), mais les deux sont undefined.

Une idée?

javascriptjqueryeventsobject
66
LazNiko

Puisque l'objet événement "evt" n'est pas passé du paramètre, est-il toujours possible d'obtenir cet objet?

Non, pas de manière fiable. IE et certains autres navigateurs le rendent disponible sous la forme window.event (Pas $(window.event)), mais ce n'est pas standard et n'est pas supporté par tous les navigateurs (célèbre, Firefox ne fait pas).

Vous feriez mieux de passer l'objet événement dans la fonction:

<a href="#" onclick="myFunc(event, 1,2,3)">click</a>

Cela fonctionne même sur les navigateurs non-IE car ils exécutent le code dans un contexte comportant une variable event (et fonctionne sur IE car event est résolu en window.event). Je l'ai essayé sous IE6 +, Firefox, Chrome, Safari et Opera. Exemple: http://jsbin.com/iwifu4

Mais votre meilleur pari consiste à utiliser la gestion d'événements moderne:

HTML:

<a href="#">click</a>

JavaScript en utilisant jQuery (puisque vous utilisez jQuery):

$("selector_for_the_anchor").click(function(event) {
    // Call `myFunc`
    myFunc(1, 2, 3);

    // Use `event` here at the event handler level, for instance
    event.stopPropagation();
});

... ou si vous voulez vraiment passer event en myFunc:

$("selector_for_the_anchor").click(function(event) {
    myFunc(event, 1, 2, 3);
});

Le sélecteur peut être n'importe quoi qui identifie l'ancre. Vous avez le choix entre très riche (presque tout le CSS3, plus certains). Vous pouvez ajouter un id ou class à l'ancre, mais là encore, vous avez d'autres choix. Si vous pouvez utiliser où il se trouve dans le document plutôt que d'ajouter quelque chose d'artificiel, tant mieux.

93
T.J. Crowder

in IE vous pouvez obtenir l'objet événement par window.event dans d'autres navigateurs sans directive 'use strict', il est possible d'obtenir par arguments.callee.caller.arguments[0].

function myFunc(p1, p2, p3) {
    var evt = window.event || arguments.callee.caller.arguments[0];
}
14
otakustay

Ecrivez votre déclaration de gestionnaire d'événement comme ceci:

<a href="#" onclick="myFunc(event,1,2,3)">click</a>

Ensuite, votre fonction "myFunc ()" peut accéder à l'événement.

La valeur de chaîne de l'attribut "onclick" est convertie en une fonction pratiquement identique à celle utilisée par le navigateur (en interne) appelant le constructeur de la fonction:

theAnchor.onclick = new Function("event", theOnclickString);

(sauf dans IE). Cependant, comme "événement" est un global dans IE (c'est un attribut window)), vous pourrez le transmettre à la fonction de cette manière dans n'importe quel navigateur.

3
Pointy

Si vous appelez votre gestionnaire d'événements sur le balisage, comme vous le faites maintenant, vous ne pouvez pas (x-browser). Mais si vous liez l’événement click avec jquery, il est possible de la manière suivante:

Balisage:

  <a href="#" id="link1" >click</a>

Javascript:

  $(document).ready(function(){
      $("#link1").click(clickWithEvent);  //Bind the click event to the link
  });
  function clickWithEvent(evt){
     myFunc('p1', 'p2', 'p3');
     function myFunc(p1,p2,p3){  //Defined as local function, but has access to evt
        alert(evt.type);        
     }
  }

Depuis l'événement

1
Edgar Villegas Alvarado