web-dev-qa-db-fra.com

passer cet objet comme argument dans l'événement onChange?

Je veux créer un eventHandler qui passe "cet" objet en paramètre. J'ai essayé

 <select id="customer" onchange="custChange(this);">

cela fonctionne bien et obtient l'objet dom sur lequel même lors du changement a été appelé.

Mais selon ma compréhension, cela ne devrait pas fonctionner car le premier argument est attendu comme "événement" (et non pas "cet" objet) dans la méthode du gestionnaire d'événements comme ci-dessous

  <select id="customer" onchange="custChange(event);">

pouvons-nous passer n'importe quel argument (ceci ou événement) dans la méthode eventHandler à condition que leur nom soit correct ou le premier argument sera toujours considéré comme un objet d'événement?

javascriptonchange
17
emilly

Vous avez défini custChange et plus important encore: vous êtes l'appeler. Vous pouvez donc décider vous-même quels arguments il doit accepter et dans quel ordre. Seulement pour les fonctions qui ne sont pas appelées par vous, vous devez faire attention à l'ordre des arguments.

Mais si vous voulez définir custChange pour qu'il soit compatible avec autres façonsdes gestionnaires d'événements de liaison , c'est-à-dire.

function custChange(event) {
    // `this` refers to the DOM element
}

alors vous pouvez l'appeler avec

custChange.call(this, event);
9
Felix Kling

J'ai fait un test.

function change(){
    console.info( arguments );
}

<select name="" id="" onchange="change( this, event )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( event, this )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( this, e )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

J'ai utilisé les sélections ci-dessus un par un, puis j'ai obtenu les informations sur la console ci-dessous:

  • [sélectionner, événement]
  • [Événement, sélectionnez]
  • Erreur de référence non détectée: e n'est pas défini

Ainsi, à partir des résultats, j'ai conclu que nous devons passer le bon mot dans l'appel de page et que nous pouvons changer leur position.

5
Zhang Yang

Le premier argument sera toujours l'événement.

[edit] Vous pouvez appeler votre gestionnaire avec l'argument de votre choix, les objets event et this étant disponibles lors de l'appel. event fait référence à l'objet événement et this fait référence à l'objet dom qui déclenche l'événement. [/ edit]

Cependant, dans le gestionnaire event.currentTarget sera lié à l'objet qui a déclenché l'événement:

<script>
    function custChange(event) {
        // event.currentTarget = select element
    }
</script>
<select id="customer" onchange="custChange(event);">
2
Thierry J.

Vous pouvez peut-être faire ça comme ceci:

<p><a id="link" href="#">click me</a></p>
<script>
var link = document.getElementById("link");
AttachEvent(link, "click", EventHandler);
function AttachEvent(element, type, handler) {
    if (element.addEventListener) element.addEventListener(type, handler, false);
    else element.attachEvent("on"+type, handler);
}

J'espère que ça aide.

0
ZaoTaoBao

Vous pouvez le faire selon un javaScript discret:

$("#customer").on("change", function () {
    ... and here you have $(this) object linked to 'customer' select
});
0
Sergio