web-dev-qa-db-fra.com

Comment passer event comme argument à un gestionnaire d'événements inline en JavaScript?

// this e works
document.getElementById("p").oncontextmenu = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
};

// this e is undefined
function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

<p id="p" onclick="doSomething(e)">
    <a href="#">foo</a>
    <span>bar</span>
</p>

Des questions similaires ont été posées.

Mais dans mon code, j'essaie d'obtenir les éléments enfants sur lesquels l'utilisateur a cliqué, comme a ou span.

Alors, quelle est la bonne façon de passer event en tant qu’argument au gestionnaire d’événements, ou comment obtenir un événement dans le gestionnaire sans passer d’argument?

modifier

Je suis au courant de addEventListener et jQuery. Merci de fournir une solution pour la transmission d'événement à inline organisateur d'événements.

javascripteventsinlineargument-passing
74
user1643156

pour passer l'objet event:

<p id="p" onclick="doSomething(event);">

pour obtenir l'élément enfant cliqué (doit être utilisé avec le paramètre event:

function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

passer l'élément lui-même (DOMElement):

<p id="p" onclick="doThing(this);">

voir des exemples en direct sur jsFiddle

124
Akram Berkawy

Puisque les événements en ligne sont exécutés en tant que fonctions, vous pouvez simplement utiliser arguments.

<p id="p" onclick="doSomething.apply(this, arguments)">

et

function doSomething(e) {
  if (!e) e = window.event;
  // 'e' is the event.
  // 'this' is the P element
}

L'événement mentionné dans la réponse acceptée est en réalité le nom de l'argument transmis à la fonction. Cela n'a rien à voir avec l'événement global.

12
Semra

Vous n'avez pas besoin de passer this, il y a déjà un objet event passé automatiquement par défaut, qui contient event.target Et qui contient l'objet d'où il provient. Vous pouvez alléger votre syntaxe:

Cette:

<p onclick="doSomething()">

Travaillera avec ceci:

function doSomething(){
  console.log(event);
  console.log(event.target);
}

Vous n'avez pas besoin d'instancier l'objet event, il est déjà là. Essaye le. Et event.target Contiendra l'intégralité de l'objet l'appelant, que vous avez référencé comme "ceci" auparavant.

Maintenant, si vous déclenchez dynamiquement quelque chose () dans votre code, vous remarquerez que event n'est pas défini. C'est parce que cela n'a pas été déclenché par un événement de clic. Donc, si vous voulez toujours déclencher artificiellement l'événement, utilisez simplement dispatchEvent:

document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));

Ensuite, doSomething() verra event et event.target Comme d'habitude!

Pas besoin de passer this partout, et vous pouvez garder vos signatures de fonctions libres d'informations de câblage et simplifier les choses.

0
Wadih M.