Obtener la identificación del elemento que disparó un evento

¿Hay alguna forma de obtener la ID del elemento que dispara un evento?

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

Excepto, por supuesto, que la var testdebe contener la identificación "aaa", si el evento se dispara desde el primer formulario y "bbb", si el evento se dispara desde el segundo formulario.

En jQuery event.targetsiempre se refiere al elemento que activó el evento, donde se eventpasa el parámetro a la función. http://api.jquery.com/category/events/event-object/

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

Tenga en cuenta también que thistambién funcionará, pero que no es un objeto jQuery, por lo que si desea utilizar una función jQuery, debe referirse a él como $(this), por ejemplo:

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

Como referencia, prueba esto! ¡Funciona!

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

Aunque se menciona en otras publicaciones, quería explicar esto:

$(event.target).id es indefinido

$(event.target)[0].id da el atributo id.

event.target.id también le da el atributo id.

this.id da el atributo id.

y

$(this).id es indefinido.

Las diferencias, por supuesto, están entre los objetos jQuery y los objetos DOM. "id" es una propiedad DOM, por lo que debe estar en el objeto elemento DOM para usarlo.

(Me hizo tropezar, así que probablemente tropezó con alguien más)

Para todos los eventos, no solo se limita a jQuery que puede usar

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

Donde event.targetfalla, vuelve a funcionar event.srcElementpara IE. Para aclarar el código anterior no requiere jQuery pero también funciona con jQuery.

Puede usar (this)para hacer referencia al objeto que activó la función.

'this'es un DOM elemento cuando se encuentra dentro de una función de devolución de llamada (en el contexto de jQuery), por ejemplo, al ser llamado por los métodos click, each, bind, etc.

Aquí es donde puede obtener más información: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Genero una tabla dinámicamente en una base de datos, recibo los datos en JSON y los pongo en una tabla. Cada fila de la tabla tiene un carácter único ID, que es necesario para otras acciones, por lo tanto, si se modifica el DOM, necesita un enfoque diferente:

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

Elemento que disparó el evento que tenemos en la propiedad del evento

event.currentTarget

Obtenemos el objeto del nodo DOM en el que se configuró el controlador de eventos.

El nodo más anidado que comenzó el proceso de burbujeo que tenemos en

event.target

El objeto de evento siempre es el primer atributo del controlador de eventos, por ejemplo:

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

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

});

Más información sobre la delegación de eventos Puede leer en http://maciejsikora.com/standard-events-vs-event-delegation/

El elemento fuente como un objeto jQuery debe obtenerse a través de

var $el = $(event.target);

Esto le proporciona la fuente del clic, en lugar del elemento al que también se le asignó la función de clic. Puede ser útil cuando el evento de clic está en un objeto primario, por ejemplo, un evento de clic en una fila de la tabla, y necesita la celda en la que se hizo clic

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

Puedes intentar usar:

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

esto funciona con la mayoría de los tipos de elementos:

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

En el caso de los controladores de eventos delegados, donde podría tener algo como esto:

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

y tu código JS así:

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

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

Lo más probable es que encuentre ese itemId undefined, ya que el contenido del LI está envuelto en un <span>, lo que significa <span>que probablemente será el objetivo del evento. Puede solucionar esto con un pequeño cheque, así:

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

O, si prefiere maximizar la legibilidad (y también evitar la repetición innecesaria de llamadas de ajuste 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
    });
});

Cuando se utiliza la delegación de eventos, el .is()método es invaluable para verificar que el objetivo de su evento (entre otras cosas) sea realmente lo que necesita. Use .closest(selector)para buscar el árbol DOM y use .find(selector)(generalmente junto con .first(), como en .find(selector).first()) para buscarlo. No es necesario usar .first()cuando se utiliza .closest(), ya que sólo devuelve el primer elemento antecesor juego, mientras que .find()los retornos todos los descendientes coincidentes.

Use can Use .on event

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

Esto funciona en un z-indexparámetro superior al evento mencionado en las respuestas anteriores:

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

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

De esta manera, siempre obtendrá idel elemento (en este ejemplo li). También cuando se hace clic en un elemento hijo del padre ...

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

Trabajando JSFiddle aquí .

Solo usa la thisreferencia

$(this).attr("id")

o

$(this).prop("id")

this.element.attr("id") funciona bien en IE8.

Ambos de estos trabajos,

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

y

alert(this.id);

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

Puede usar la función para obtener la identificación y el valor del elemento modificado (en mi ejemplo, he usado una etiqueta Seleccionar).

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

Estoy trabajando con

jQuery Autocompletar

Intenté buscar uno eventcomo se describió anteriormente, pero cuando se activa la función de solicitud, no parece estar disponible. Solía this.element.attr("id")obtener la identificación del elemento, y parece funcionar bien.

En el caso de Angular 7.x puede obtener el elemento nativo y su id o propiedades.

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>