En jQuery event.target siempre se refiere al elemento que desencadenó el evento, donde event es el parámetro pasado 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 this también funcionará, pero que no es un objeto jQuery, por lo que si desea usar una función jQuery en él, debe referirse a él como $(this), p.ej:

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

Como referencia, ¡intente 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 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 del elemento DOM para usarlo.

(Me hizo tropezar, por lo que probablemente tropezó con alguien más)

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

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

Dónde event.target falla, vuelve a caer event.srcElement para IE. Para aclarar el código anterior no se requiere jQuery pero también funciona con jQuery.

Puedes usar (this) para hacer referencia al objeto que disparó la función.

'this' es un DOM elemento cuando está dentro de una función de devolución de llamada (en el contexto de jQuery), por ejemplo, siendo 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 una ID, que es necesario para acciones posteriores, por lo que, 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 evento perfecta

event.currentTarget

Obtenemos Nodo DOM objeto en el que se estableció el controlador de eventos.

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

event.target

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

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

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

});

Más 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 da la fuente del clic, en lugar del elemento que también se asignó a la función de clic. Puede ser útil cuando el evento de clic está en un objeto principal, 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);
});

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

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

Puedes intentar usar:

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

En el caso de los controladores de eventos delegados, es posible que tenga 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 su 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
    });
});

Es muy probable que encuentre que itemId es undefined, ya que el contenido de la LI está envuelto en un <span>, lo que significa el <span> 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 envoltura 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
    });
});

Al usar la delegación de eventos, el .is() El método es invaluable para verificar que el objetivo de su evento (entre otras cosas) es realmente lo que necesita. Usar .closest(selector) para buscar en el árbol DOM y usar .find(selector) (generalmente junto con .first(), como en .find(selector).first()) para buscarlo. No necesitas usar .first() cuando se utiliza .closest(), ya que solo devuelve el primer elemento ancestro coincidente, mientras que .find() devuelve todos los descendientes coincidentes.

Usar puede Usar .on evento

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

Esto funciona en una mayor z-index que el parámetro de evento mencionado en las respuestas anteriores:

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

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

De esta manera siempre obtendrá el id del (en este ejemplo li) elemento. También cuando se hace clic en un elemento secundario 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 el this referencia

$(this).attr("id")

or

$(this).prop("id")

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

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

Ambos funcionan,

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

y

alert(this.id);

Pure JS es más simple

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

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

Puede usar la función para obtener la identificación y el valor del elemento cambiado (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

Autocompletar jQuery

Intenté buscar un event como se describió anteriormente, pero cuando la función de solicitud se activa, no parece estar disponible. solía this.element.attr("id") para obtener la ID del elemento en su lugar, 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>

Ya hay muchas formas de hacer esto y ejemplos, pero si necesita dar un paso más y necesita evitar la tecla Intro en formularios, y aún así la necesita en un área de texto de varias líneas, se vuelve más complicado. Lo siguiente solucionará el problema.

<script>
    $(document).ready(function() {
      $(window).keydown(function(event){
        if(event.keyCode == 13) {
           //There are 2 textarea forms that need the enter key to work.
            if((event.target.id="CommentsForOnAir") || (event.target.id="CommentsForOnline"))
            {
                // Prevent the form from triggering, but allowing multi-line to still work.
            }
            else
            {
                event.preventDefault();
                return false;
            }         
        }
      });
    });
</script>

<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>

Probablemente podría simplificarse más, pero entiendes el concepto.