Comment passer un événement comme argument à un gestionnaire d'événements en ligne en JavaScript ?

Question

// 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 qui ont été cliqués, comme a o span .

Alors quelle est la façon correcte de passer event en tant qu'argument du gestionnaire d'événement, ou comment obtenir l'événement dans le gestionnaire sans passer d'argument ?

modifier

Je suis au courant de addEventListener y jQuery veuillez fournir une solution pour transmettre un événement à inline de l'événement.

Answer 1

Pour passer le event objet :

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

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

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

pour passer le element lui-même (DOMElement) :

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

voir l'exemple en direct sur jsFiddle .

Vous pouvez spécifier le nom du event comme ci-dessus, mais votre gestionnaire peut également accéder à l'objet event comme décrit aquí : "Lorsque le gestionnaire d'événements est spécifié comme un attribut HTML, le code spécifié est enveloppé dans une fonction avec les paramètres suivants". Il y a beaucoup plus de documentation supplémentaire sur ce lien.

Answer 2

Vous n'avez pas besoin de passer this il y a déjà le event transmis automatiquement par défaut, qui contient event.target qui a l'objet dont il provient. Tu peux alléger ta syntaxe :

Ceci :

<p onclick="doSomething()">

Ça marchera avec ça :

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

Vous n'avez pas besoin d'instancier la fonction event l'objet, il est déjà là. Essayez-le. Et event.target contiendra l'objet entier qui l'appelle, que vous désigniez auparavant par "this".

Maintenant, si vous déclenchez dynamiquement doSomething() à partir de quelque part dans votre code, vous remarquerez que event est indéfini. C'est parce qu'il 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}));

Puis doSomething() verra event y event.target comme d'habitude !

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

Answer 3

Puisque les événements en ligne sont exécutés comme des 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 fait le nom de l'argument passé à la fonction. Il n'a rien à voir avec l'événement global.

Answer 4

Voici comment je procéderais pour empêcher les utilisateurs de copier et de coller des caractères non valides dans les champs de saisie de texte :

function validatePaste(el, e) {
  var regex = /^[a-z .'-]+$/gi;
  var key = e.clipboardData.getData('text')
  if (!regex.test(key)) {
    e.preventDefault();
    return false;
  }
}

Cette fonction est située dans <script> et il est appelé comme :

<input type="text" onpaste="validatePaste(event)">