web-dev-qa-db-fra.com

jquery / javascript: function (e) {.... qu'est-ce que e? pourquoi est-il nécessaire? que fait-il / accomplit-il réellement?

$('#myTable').click(function(e) {
    var clicked = $(e.target);
    clicked.css('background', 'red');
});

Quelqu'un peut-il m'expliquer cela, et expliquer pourquoi e est nécessaire, et ce qu'il fait réellement ..

javascriptjqueryevents
57
android.nick

L'utilisation de e n'est qu'un raccourci pour event. Vous pouvez passer n'importe quel nom de variable que vous désirez.

// would work just the same
$('#myTable').click(function(anyothername) {
    var clicked = $(anyothername.target);
});

Vous pouvez en savoir plus sur gestion des événements par jQuery .

64
Frankie

Un avantage d'avoir e (l'objet qui a déclenché l'événement) vous permet d'empêcher la propagation de comportements par défaut pour certains éléments. Par exemple:

<a id="navLink" href="http://mysite/someOtherPage.htm">Click For Info</a>

affiche un lien sur lequel l'utilisateur peut cliquer. Si un utilisateur a désactivé JavaScript (pourquoi? Je ne sais pas), vous voulez que l'utilisateur accède à someOtherPage.htm lorsqu'il clique sur le lien. Mais si JavaScript est activé, vous souhaitez afficher une boîte de dialogue modale et ne pas quitter la page. Vous géreriez cela en empêchant le comportement par défaut de l'ancre/du lien et en affichant le modal en tant que tel:

$("#navLink").click(function(e) {
  e.preventDefault();  //this prevents the user from navigating to the someOtherPage.htm
  $("#hiddenDiv").dialog({
    //options
  });  //show the dialog
});

Ainsi, la disponibilité de ce paramètre vous permet, entre autres choses décrites dans d'autres réponses, d'empêcher le comportement par défaut de l'élément sélectionné.

J'espère que cela t'aides!

10
David Hoerster

Je parle en théorie car je ne suis pas un expert mais j'ai atteint le résultat souhaité en utilisant le petit (e) qui n'a pas besoin d'être un e lol

Je l'ai compris. C'est une façon de passer le même événement d'une fonction à une autre.

En termes plus simples. Je voulais faire de la navigation de page une fonction de défilement élastique, cependant, je voulais que la page navigue par survol "et" je voulais que la même navigation soit cliquable à certaines conditions. Je voulais également la même navigation dynamique à partir d'autres événements de clic qui n'étaient pas des liens. Pour conserver la cible actuelle et toujours utiliser la fonction de navigation, j'ai dû définir le petit (e) car jQuery perdra la portée de $ (this) en tant que même cible de la fonction lol. Voici un petit exemple.

function navigate_to_page(e){
var target = $(e.currentTarget).attr('href'); //--This is the same as $(this) but more static to bring out of it's scope
    $('html, body').animate({
    'scrollTop':$(target).offset().top-0,
    'scrollLeft': $(target).offset().left-$(window).width()*0.0}, 2000, 'easeOutBounce');
}

Ne laissez pas le charabia vous dérouter. C'est juste une simple animation de défilement de page. La chose à laquelle prêter attention est la e.currentTarget. e est notre variable et currentTarget est un jQuery équivalent à $ (this) donc ceux-ci ensemble est une fonction Globular $ (this). Maintenant, je l'appelle par une autre fonction avec des condistions comme ça

$('#myNavigationDiv a').on('mouseenter', function(e){
    if($(myCondition) === true){
        return false;
        }else{
        navigate_to_page(e);
        }
    });

Voyez comment le petit (e) a tout lié ensemble?

Vous pouvez maintenant remplacer (e) par (ce que vous voulez). En appelant e dans les deux fonctions, il correspondait e.currentTarget et vous pouvez l'appliquer à toutes les fonctions spécifiques détaillées dont vous avez besoin et vous enregistrer LITTÉRALEMENT des pages de code lol

8
BRianIAK The Villain

C'est le paramètre formel de la fonction. jQuery passera dans un objet événement lorsque la fonction est appelée. Ceci est utilisé pour déterminer la cible. Comme indiqué dans la documentation , jQuery passera toujours un objet événement même lorsque le navigateur (par exemple IE) ne le fait pas.

Dans ce cas, la cible vous indique quel élément a été cliqué à l'origine.

6
Matthew Flaschen