Obtention de l'ID de l'élément qui a déclenché un événement

Existe-t-il un moyen d'obtenir l'ID de l'élément qui déclenche un événement?

Je pense à quelque chose comme:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

Sauf bien sûr que la var testdoit contenir l'identifiant "aaa", si l'événement est déclenché à partir du premier formulaire, et "bbb", si l'événement est déclenché à partir du second formulaire.

Dans jQuery, se event.targetréfère toujours à l'élément qui a déclenché l'événement, où eventest le paramètre passé à la fonction. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Notez également que thiscela fonctionnera également, mais que ce n'est pas un objet jQuery, donc si vous souhaitez utiliser une fonction jQuery dessus, vous devez vous y référer comme $(this), par exemple:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

Pour référence, essayez ceci! Ça marche!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

Bien que cela soit mentionné dans d'autres articles, je voulais le préciser:

$(event.target).id n'est pas défini

$(event.target)[0].id donne l'attribut id.

event.target.id donne également l'attribut id.

this.id donne l'attribut id.

et

$(this).id n'est pas défini.

Les différences, bien sûr, sont entre les objets jQuery et les objets DOM. "id" est une propriété DOM, vous devez donc être sur l'objet élément DOM pour l'utiliser.

(Ça m'a fait trébucher, donc ça a probablement déclenché quelqu'un d'autre)

Pour tous les événements, pas seulement jQuery, vous pouvez utiliser

var target = event.target || event.srcElement;
var id = target.id

En cas d' event.targetéchec, il retombe sur event.srcElementIE. Pour clarifier le code ci-dessus ne nécessite pas jQuery mais fonctionne également avec jQuery.

Vous pouvez utiliser (this)pour référencer l'objet qui a déclenché la fonction.

'this'est un élément DOM lorsque vous êtes à l'intérieur d'une fonction de rappel (dans le contexte de jQuery), par exemple, être appelé par les méthodes click, each, bind, etc.

Voici où vous pouvez en savoir plus: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Je génère une table dynamiquement sur une base de données, reçois les données en JSON et les mets dans une table. Chaque ligne de table a un unique ID, qui est nécessaire pour d'autres actions, donc, si le DOM est modifié, vous avez besoin d'une approche différente:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

Élément qui a déclenché l'événement que nous avons dans la propriété de l' événement

event.currentTarget

Nous obtenons l' objet nœud DOM sur lequel était défini le gestionnaire d'événements.

Le nœud le plus imbriqué qui a commencé le processus de création de bulles que nous avons dans

event.target

L'objet événement est toujours le premier attribut du gestionnaire d'événements, par exemple:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

En savoir plus sur la délégation d'événements Vous pouvez lire sur http://maciejsikora.com/standard-events-vs-event-delegation/

L'élément source en tant qu'objet jQuery doit être obtenu via

var $el = $(event.target);

Cela vous donne la source du clic, plutôt que l'élément auquel la fonction de clic a également été affectée. Peut être utile lorsque l'événement de clic se trouve sur un objet parent EG.un événement de clic sur une ligne du tableau et que vous avez besoin de la cellule sur laquelle vous avez cliqué

$("tr").click(function(event){
    var $td = $(event.target);
});

Vous pouvez essayer d'utiliser:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

cela fonctionne avec la plupart des types d'éléments:

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

Dans le cas des gestionnaires d'événements délégués, où vous pourriez avoir quelque chose comme ceci:

<ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

et votre code JS comme ceci:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Vous constaterez très probablement que itemId l'est undefined, car le contenu du LI est enveloppé dans un <span>, ce qui signifie que ce <span>sera probablement la cible de l'événement. Vous pouvez contourner cela avec un petit chèque, comme ceci:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Ou, si vous préférez maximiser la lisibilité (et éviter également la répétition inutile d'appels de jQuery wrapping):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

Lorsque vous utilisez la délégation d'événements, la .is()méthode est inestimable pour vérifier que votre cible d'événement (entre autres) est réellement ce dont vous avez besoin. Utilisez .closest(selector)pour rechercher dans l'arborescence DOM et utilisez .find(selector)(généralement couplé avec .first(), comme dans .find(selector).first()) pour le rechercher. Vous n'avez pas besoin de l'utiliser .first()lors de l'utilisation .closest(), car il ne renvoie que le premier élément ancêtre correspondant, tandis que .find()renvoie tous les descendants correspondants.

Utiliser peut utiliser l'événement .on

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

Cela fonctionne sur un z-indexparamètre supérieur au paramètre d'événement mentionné dans les réponses ci-dessus:

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

De cette façon, vous obtiendrez toujours l' élément de id(dans cet exemple li). Aussi, lorsque vous cliquez sur un élément enfant du parent ..

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

Travailler JSFiddle ici .

Utilisez simplement la thisréférence

$(this).attr("id")

ou

$(this).prop("id")

this.element.attr("id") fonctionne bien dans IE8.

Ces deux travaux,

jQuery(this).attr("id");

et

alert(this.id);

$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})

Vous pouvez utiliser la fonction pour obtenir l'id et la valeur de l'élément modifié (dans mon exemple, j'ai utilisé une balise Select.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

Je travaille avec

jQuery Autocomplete

J'ai essayé de chercher un eventcomme décrit ci-dessus, mais lorsque la fonction de demande se déclenche, elle ne semble pas être disponible. J'avais l'habitude this.element.attr("id")d'obtenir l'ID de l'élément à la place, et cela semble bien fonctionner.

Dans le cas d'Angular 7.x, vous pouvez obtenir l'élément natif et son ID ou ses propriétés.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

html:

<div class="list-item" (click)="myClickHandler($event)">...</div>