Obtendo o ID do elemento que disparou um evento

Existe alguma maneira de obter o ID do elemento que dispara um evento?

Estou pensando em algo como:

$(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>

Exceto, é claro, que o var testdeve conter o ID "aaa", se o evento for disparado a partir do primeiro formulário e "bbb", se o evento for acionado a partir do segundo formulário.

No jQuery event.targetsempre se refere ao elemento que acionou o evento, onde eventé o parâmetro passado para a função. http://api.jquery.com/category/events/event-object/

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

Observe também que thisisso também funcionará, mas que não é um objeto jQuery, portanto, se você deseja usar uma função jQuery, deve se referir a ela como $(this), por exemplo:

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

Para referência, tente isso! Funciona!

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

Embora seja mencionado em outros posts, eu queria explicar isso:

$(event.target).id é indefinido

$(event.target)[0].id fornece o atributo id.

event.target.id também fornece o atributo id.

this.id fornece o atributo id.

e

$(this).id está indefinido.

As diferenças, é claro, são entre objetos jQuery e objetos DOM. "id" é uma propriedade DOM, portanto você precisa estar no objeto de elemento DOM para usá-lo.

(Isso me tropeçou, então provavelmente tropeçou em outra pessoa)

Para todos os eventos, não se limitando apenas ao jQuery, você pode usar

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

Onde event.targetfalha, recai no event.srcElementIE. Para esclarecer o código acima, não é necessário o jQuery, mas também funciona com o jQuery.

Você pode usar (this)para fazer referência ao objeto que disparou a função.

'this'é um elemento DOM quando você está dentro de uma função de retorno de chamada (no contexto do jQuery), por exemplo, sendo chamado pelos métodos click, each, bind, etc.

Aqui é onde você pode aprender mais: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Gero uma tabela dinamicamente a partir de um banco de dados, recebo os dados em JSON e os coloco em uma tabela. Cada linha da tabela IDpossui uma única , necessária para ações adicionais; portanto, se o DOM for alterado, você precisará de uma abordagem diferente:

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

Elemento que disparou o evento que temos na propriedade event

event.currentTarget

Recebemos DOM nó de objeto no qual era manipulador de eventos set.

O nó mais aninhado que iniciou o processo de bolhas que temos

event.target

O objeto de evento é sempre o primeiro atributo do manipulador de eventos, exemplo:

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

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

});

Mais sobre delegação de eventos Você pode ler em http://maciejsikora.com/standard-events-vs-event-delegation/

O elemento de origem como um objeto jQuery deve ser obtido via

var $el = $(event.target);

Isso fornece a fonte do clique, em vez do elemento ao qual a função de clique também foi atribuída. Pode ser útil quando o evento click está em um objeto pai EG.a evento de clique em uma linha da tabela e você precisa da célula que foi clicada

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

Você pode tentar usar:

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

isso funciona com a maioria dos tipos de elementos:

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

No caso de manipuladores de eventos delegados, onde você pode ter algo parecido com isto:

<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>

e seu código JS assim:

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

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

É mais provável que você encontre esse itemId undefined, pois o conteúdo do LI está envolvido em um <span>, o que significa <span>que provavelmente será o destino do evento. Você pode contornar isso com uma pequena verificação, assim:

$(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, se você preferir maximizar a legibilidade (e também evitar a repetição desnecessária de chamadas de quebra automática de jQuery):

$(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
    });
});

Ao usar a delegação de eventos, o .is()método é inestimável para verificar se o destino do seu evento (entre outras coisas) é realmente o que você precisa. Use .closest(selector)para pesquisar na árvore do DOM e use .find(selector)(geralmente associado a .first(), como em .find(selector).first()) para pesquisá-la. Você não precisa usá-lo .first()ao usá- .closest()lo, pois ele retorna apenas o primeiro elemento ancestral correspondente, enquanto .find()retorna todos os descendentes correspondentes.

Use can Use. No evento

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

Isso funciona em um z-indexparâmetro maior que o evento mencionado nas respostas acima:

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

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

Dessa forma, você sempre obterá o elemento id(neste exemplo li). Além disso, quando clicado em um elemento filho do pai.

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);
}

Trabalhando JSFiddle aqui .

Basta usar a thisreferência

$(this).attr("id")

ou

$(this).prop("id")

this.element.attr("id") funciona bem no IE8.

Ambos trabalham,

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

e

alert(this.id);

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

Você pode usar a função para obter o ID e o valor do item alterado (no meu exemplo, usei uma tag Select.

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

Estou trabalhando com

Preenchimento automático do jQuery

Eu tentei procurar um event como descrito acima, mas quando a função de solicitação é acionada, ela não parece estar disponível. Eu costumava this.element.attr("id")obter o ID do elemento e ele parece funcionar bem.

No caso do Angular 7.x, você pode obter o elemento nativo e seu ID ou propriedades.

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>