In jQuery event.target always refers to the element that triggered the event, where event is the parameter passed to the function. http://api.jquery.com/category/events/event-object/

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

Note also that this will also work, but that it is not a jQuery object, so if you wish to use a jQuery function on it then you must refer to it as $(this), e.g.:

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

You can use (this) to reference the object that fired the function.

'this' is a DOM element when you are inside of a callback function (in the context of jQuery), for example, being called by the click, each, bind, etc. methods.

Here is where you can learn more: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Element which fired event we have in event property

event.currentTarget

We get DOM node object on which was set event handler.

Most nested node which started bubbling process we have in

event.target

Event object is always first attribute of event handler, example:

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

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

});

More about event delegation You can read in http://maciejsikora.com/standard-events-vs-event-delegation/

The source element as a jQuery object should be obtained via

var $el = $(event.target);

This gets you the source of the click, rather than the element that the click function was assigned too. Can be useful when the click event is on a parent object EG.a click event on a table row, and you need the cell that was clicked

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

this works with most types of elements:

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

This works on a higher z-index than the event parameter mentioned in above answers:

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

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

This way you will always get the id of the (in this example li) element. Also when clicked on a child element of the parent..

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

Pure JS is simpler

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>

You can use the function to get the id and the value for the changed item(in my example, I've used a Select tag.

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

I'm working with

jQuery Autocomplete

I tried looking for an event as described above, but when the request function fires it doesn't seem to be available. I used this.element.attr("id") to get the element's ID instead, and it seems to work fine.

In case of Angular 7.x you can get the native element and its id or properties.

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>

There's plenty of ways to do this and examples already, but if you need take it a further step and need to prevent the enter key on forms, and yet still need it on a multi-line textarea, it gets more complicated. The following will solve the problem.

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

It could probably be simplified more, but you get the concept.