<p>Is there any way to get the ID of the element that fires an event?</p>

<p>I'm thinking something like:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="starterkit/jquery.js"&gt;&lt;/script&gt;

&lt;form class="item" id="aaa"&gt;
  &lt;input class="title"&gt;&lt;/input&gt;
&lt;/form&gt;
&lt;form class="item" id="bbb"&gt;
  &lt;input class="title"&gt;&lt;/input&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Except of course that the var <code>test</code> should contain the id <code>"aaa"</code>, if the event is fired from the first form, and <code>"bbb"</code>, if the event is fired from the second form.</p>

[{'answer_id': 48242, 'author': 'Espo', 'author_id': 2257, 'author_profile': 'https://Stackoverflow.com/users/2257', 'pm_score': 6, 'selected': False, 'text': '<p>You can use <code>(this)</code> to reference the object that fired the function.</p>\n\n<p><code>\'this\'</code> is a <strong>DOM</strong> 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.</p>\n\n<p>Here is where you can learn more: <a href="http://remysharp.com/2007/04/12/jquerys-this-demystified/" rel="noreferrer">http://remysharp.com/2007/04/12/jquerys-this-demystified/</a></p>\n'}, {'answer_id': 48684, 'author': 'samjudson', 'author_id': 1908, 'author_profile': 'https://Stackoverflow.com/users/1908', 'pm_score': 11, 'selected': True, 'text': '<p>In jQuery <code>event.target</code> always refers to the element that triggered the event, where <code>event</code> is the parameter passed to the function. <a href="http://api.jquery.com/category/events/event-object/" rel="noreferrer">http://api.jquery.com/category/events/event-object/</a></p>\n\n<pre><code>$(document).ready(function() {\n    $("a").click(function(event) {\n        alert(event.target.id);\n    });\n});\n</code></pre>\n\n<p>Note also that <code>this</code> 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 <code>$(this)</code>, e.g.:</p>\n\n<pre><code>$(document).ready(function() {\n    $("a").click(function(event) {\n        // this.append wouldn\'t work\n        $(this).append(" Clicked");\n    });\n});\n</code></pre>\n'}, {'answer_id': 3624837, 'author': 'Gemma', 'author_id': 437705, 'author_profile': 'https://Stackoverflow.com/users/437705', 'pm_score': 8, 'selected': False, 'text': '<p>For reference, try this! It works!</p>\n\n<pre><code>jQuery("classNameofDiv").click(function() {\n    var contentPanelId = jQuery(this).attr("id");\n    alert(contentPanelId);\n});\n</code></pre>\n'}, {'answer_id': 7389282, 'author': 'SMut', 'author_id': 940734, 'author_profile': 'https://Stackoverflow.com/users/940734', 'pm_score': 5, 'selected': False, 'text': '<p>I generate a table dynamically out a database, receive the data in JSON and put it into a table. Every table row got a unique <code>ID</code>, which is needed for further actions, so, if the DOM is altered you need a different approach:</p>\n\n<pre><code>$("table").delegate("tr", "click", function() {\n   var id=$(this).attr(\'id\');\n   alert("ID:"+id);  \n});\n</code></pre>\n'}, {'answer_id': 9825688, 'author': 'Morvael', 'author_id': 1286358, 'author_profile': 'https://Stackoverflow.com/users/1286358', 'pm_score': 4, 'selected': False, 'text': '<p>The source element as a jQuery object should be obtained via</p>\n\n<pre><code>var $el = $(event.target);\n</code></pre>\n\n<p>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\nEG.a click event on a table row, and you need the cell that was clicked</p>\n\n<pre><code>$("tr").click(function(event){\n    var $td = $(event.target);\n});\n</code></pre>\n'}, {'answer_id': 11562933, 'author': 'Ally', 'author_id': 837649, 'author_profile': 'https://Stackoverflow.com/users/837649', 'pm_score': 7, 'selected': False, 'text': '<p>For all events, not limited to just jQuery you can use</p>\n\n<pre><code>var target = event.target || event.srcElement;\nvar id = target.id\n</code></pre>\n\n<p>Where <code>event.target</code> fails it falls back on <code>event.srcElement</code> for IE.\nTo clarify the above code does not require jQuery but also works with jQuery.</p>\n'}, {'answer_id': 13211759, 'author': 'Darius', 'author_id': 1696922, 'author_profile': 'https://Stackoverflow.com/users/1696922', 'pm_score': 3, 'selected': False, 'text': "<p>You can try to use:</p>\n\n<pre><code>$('*').live('click', function() {\n console.log(this.id);\n return false;\n});\n</code></pre>\n"}, {'answer_id': 13252233, 'author': 'dsch', 'author_id': 1803250, 'author_profile': 'https://Stackoverflow.com/users/1803250', 'pm_score': 7, 'selected': False, 'text': '<p>Though it is mentioned in other posts, I wanted to spell this out:</p>\n\n<p><code>$(event.target).id</code> is undefined</p>\n\n<p><code>$(event.target)[0].id</code> gives the id attribute.</p>\n\n<p><code>event.target.id</code> also gives the id attribute.</p>\n\n<p><code>this.id</code> gives the id attribute.</p>\n\n<p>and</p>\n\n<p><code>$(this).id</code> is undefined.</p>\n\n<p>The differences, of course, is between jQuery objects and DOM objects. "id" is a DOM property so you have to be on the DOM element object to use it.</p>\n\n<p>(It tripped me up, so it probably tripped up someone else)</p>\n'}, {'answer_id': 16912421, 'author': 'vml19', 'author_id': 256988, 'author_profile': 'https://Stackoverflow.com/users/256988', 'pm_score': 2, 'selected': False, 'text': '<p><code>this.element.attr("id")</code> works fine in IE8.</p>\n'}, {'answer_id': 19882381, 'author': 'Marcel Verwey', 'author_id': 2603657, 'author_profile': 'https://Stackoverflow.com/users/2603657', 'pm_score': 3, 'selected': False, 'text': '<p>This works on a higher <code>z-index</code> than the event parameter mentioned in above answers:</p>\n\n<pre><code>$("#mydiv li").click(function(){\n\n    ClickedElement = this.id;\n    alert(ClickedElement);\n});\n</code></pre>\n\n<p>This way you will always get the <code>id</code> of the (in this example <code>li</code>) element. Also when clicked on a child element of the parent..</p>\n'}, {'answer_id': 21684620, 'author': 'Moji', 'author_id': 639390, 'author_profile': 'https://Stackoverflow.com/users/639390', 'pm_score': 2, 'selected': False, 'text': '<p>Both of these work,</p>\n\n<pre><code>jQuery(this).attr("id");\n</code></pre>\n\n<p>and </p>\n\n<pre><code>alert(this.id);\n</code></pre>\n'}, {'answer_id': 28245626, 'author': 'shmuli', 'author_id': 2399980, 'author_profile': 'https://Stackoverflow.com/users/2399980', 'pm_score': 2, 'selected': False, 'text': '<pre><code>var buttons = document.getElementsByTagName(\'button\');\nvar buttonsLength = buttons.length;\nfor (var i = 0; i &lt; buttonsLength; i++){\n    buttons[i].addEventListener(\'click\', clickResponse, false);\n};\nfunction clickResponse(){\n    // do something based on button selection here...\n    alert(this.id);\n}\n</code></pre>\n\n<p>Working JSFiddle <a href="http://jsfiddle.net/npvrx6sg/" rel="nofollow">here</a>.</p>\n'}, {'answer_id': 30925343, 'author': 'Isochronous', 'author_id': 462210, 'author_profile': 'https://Stackoverflow.com/users/462210', 'pm_score': 3, 'selected': False, 'text': '<p>In the case of delegated event handlers, where you might have something like this:</p>\n\n<pre><code>&lt;ul&gt;\n    &lt;li data-id="1"&gt;\n        &lt;span&gt;Item 1&lt;/span&gt;\n    &lt;/li&gt;\n    &lt;li data-id="2"&gt;\n        &lt;span&gt;Item 2&lt;/span&gt;\n    &lt;/li&gt;\n    &lt;li data-id="3"&gt;\n        &lt;span&gt;Item 3&lt;/span&gt;\n    &lt;/li&gt;\n    &lt;li data-id="4"&gt;\n        &lt;span&gt;Item 4&lt;/span&gt;\n    &lt;/li&gt;\n    &lt;li data-id="5"&gt;\n        &lt;span&gt;Item 5&lt;/span&gt;\n    &lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<p>and your JS code like so:</p>\n\n<pre><code>$(document).ready(function() {\n    $(\'ul\').on(\'click li\', function(event) {\n        var $target = $(event.target),\n            itemId = $target.data(\'id\');\n\n        //do something with itemId\n    });\n});\n</code></pre>\n\n<p>You\'ll more than likely find that itemId is <code>undefined</code>, as the content of the LI is wrapped in a <code>&lt;span&gt;</code>, which means the <code>&lt;span&gt;</code> will probably be the event target. You can get around this with a small check, like so:</p>\n\n<pre><code>$(document).ready(function() {\n    $(\'ul\').on(\'click li\', function(event) {\n        var $target = $(event.target).is(\'li\') ? $(event.target) : $(event.target).closest(\'li\'),\n            itemId = $target.data(\'id\');\n\n        //do something with itemId\n    });\n});\n</code></pre>\n\n<p>Or, if you prefer to maximize readability (and also avoid unnecessary repetition of jQuery wrapping calls):</p>\n\n<pre><code>$(document).ready(function() {\n    $(\'ul\').on(\'click li\', function(event) {\n        var $target = $(event.target),\n            itemId;\n\n        $target = $target.is(\'li\') ? $target : $target.closest(\'li\');\n        itemId = $target.data(\'id\');\n\n        //do something with itemId\n    });\n});\n</code></pre>\n\n<p>When using event delegation, the <code>.is()</code> method is invaluable for verifying that your event target (among other things) is actually what you need it to be. Use <code>.closest(selector)</code> to search up the DOM tree, and use <code>.find(selector)</code> (generally coupled with <code>.first()</code>, as in <code>.find(selector).first()</code>) to search down it. You don\'t need to use <code>.first()</code> when using <code>.closest()</code>, as it only returns the first matching ancestor element, while <code>.find()</code> returns all matching descendants.</p>\n'}, {'answer_id': 38762705, 'author': 'Error404', 'author_id': 6304917, 'author_profile': 'https://Stackoverflow.com/users/6304917', 'pm_score': 2, 'selected': False, 'text': '<p>Just use the <code>this</code> reference</p>\n\n<pre><code>$(this).attr("id")\n</code></pre>\n\n<p>or</p>\n\n<pre><code>$(this).prop("id")\n</code></pre>\n'}, {'answer_id': 39673488, 'author': 'Basant Rules', 'author_id': 2243229, 'author_profile': 'https://Stackoverflow.com/users/2243229', 'pm_score': 3, 'selected': False, 'text': '<p>Use can Use .on event</p>\n\n<pre><code>  $("table").on("tr", "click", function() {\n                    var id=$(this).attr(\'id\');\n                    alert("ID:"+id);  \n                });\n</code></pre>\n'}, {'answer_id': 40043918, 'author': 'Maciej Sikora', 'author_id': 4420812, 'author_profile': 'https://Stackoverflow.com/users/4420812', 'pm_score': 5, 'selected': False, 'text': '<p>Element which fired event we have in <strong>event</strong> property</p>\n\n<pre><code>event.currentTarget\n</code></pre>\n\n<p>We get <strong>DOM node</strong> object on which was set event handler.</p>\n\n<hr>\n\n<p>Most nested node which started bubbling process we have in</p>\n\n<pre><code>event.target\n</code></pre>\n\n<hr>\n\n<p>Event object is always first attribute of event handler, example:</p>\n\n<pre><code>document.querySelector("someSelector").addEventListener(function(event){\n\n console.log(event.target);\n console.log(event.currentTarget);\n\n});\n</code></pre>\n\n<p>More about event delegation You can read in <a href="http://maciejsikora.com/standard-events-vs-event-delegation/" rel="noreferrer">http://maciejsikora.com/standard-events-vs-event-delegation/</a></p>\n'}, {'answer_id': 48621503, 'author': 'xeon', 'author_id': 5432368, 'author_profile': 'https://Stackoverflow.com/users/5432368', 'pm_score': 1, 'selected': False, 'text': '<p>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.</p>\n\n<pre><code>              $(\'select\').change(\n                   function() {\n                        var val = this.value;\n                        var id = jQuery(this).attr("id");\n                        console.log("value changed" + String(val)+String(id));\n                   }\n               );\n</code></pre>\n'}, {'answer_id': 52881201, 'author': 'Cris', 'author_id': 1978831, 'author_profile': 'https://Stackoverflow.com/users/1978831', 'pm_score': 4, 'selected': False, 'text': "<p>this works with most types of elements:</p>\n\n<pre><code>$('selector').on('click',function(e){\n    log(e.currentTarget.id);\n    });\n</code></pre>\n"}, {'answer_id': 53251428, 'author': 'DAB', 'author_id': 2004265, 'author_profile': 'https://Stackoverflow.com/users/2004265', 'pm_score': 0, 'selected': False, 'text': '<p>I\'m working with </p>\n\n<blockquote>\n  <p>jQuery Autocomplete</p>\n</blockquote>\n\n<p>I tried looking for an <code>event</code> as described above, but when the request function fires it doesn\'t seem to be available. I used <code>this.element.attr("id")</code> to get the element\'s ID instead, and it seems to work fine.</p>\n'}, {'answer_id': 54894197, 'author': 'David Dehghan', 'author_id': 705945, 'author_profile': 'https://Stackoverflow.com/users/705945', 'pm_score': 0, 'selected': False, 'text': '<p>In case of Angular 7.x you can get the native element and its id or properties.</p>\n\n<pre><code>myClickHandler($event) {\n    this.selectedElement = &lt;Element&gt;$event.target;\n    console.log(this.selectedElement.id)\n    this.selectedElement.classList.remove(\'some-class\');\n}\n</code></pre>\n\n<p>html:</p>\n\n<pre><code>&lt;div class="list-item" (click)="myClickHandler($event)"&gt;...&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 57583976, 'author': 'chings228', 'author_id': 749827, 'author_profile': 'https://Stackoverflow.com/users/749827', 'pm_score': 3, 'selected': False, 'text': '<pre><code>$(".classobj").click(function(e){\n    console.log(e.currentTarget.id);\n})\n</code></pre>\n'}, {'answer_id': 62602366, 'author': 'Kamil Kiełczewski', 'author_id': 860099, 'author_profile': 'https://Stackoverflow.com/users/860099', 'pm_score': 2, 'selected': False, 'text': '<h1>Pure JS is simpler</h1>\n<pre><code>aaa.onclick = handler;\nbbb.onclick = handler;\n\nfunction handler() { \n  var test = this.id; \n  console.log(test) \n}\n</code></pre>\n<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">\r\n<div class="snippet-code snippet-currently-hidden">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>aaa.onclick = handler;\nbbb.onclick = handler;\n\nfunction handler() { \n  var test = this.id; \n  console.log(test) \n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form class="item" id="aaa"&gt;\n  &lt;input class="title"/&gt;\n&lt;/form&gt;\n&lt;form class="item" id="bbb"&gt;\n  &lt;input class="title"/&gt;\n&lt;/form&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 64854320, 'author': 'vr_driver', 'author_id': 1190051, 'author_profile': 'https://Stackoverflow.com/users/1190051', 'pm_score': 0, 'selected': False, 'text': "<p>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.</p>\n<pre><code>&lt;script&gt;\n    $(document).ready(function() {\n      $(window).keydown(function(event){\n        if(event.keyCode == 13) {\n           //There are 2 textarea forms that need the enter key to work.\n            if((event.target.id==&quot;CommentsForOnAir&quot;) || (event.target.id==&quot;CommentsForOnline&quot;))\n            {\n                // Prevent the form from triggering, but allowing multi-line to still work.\n            }\n            else\n            {\n                event.preventDefault();\n                return false;\n            }         \n        }\n      });\n    });\n&lt;/script&gt;\n\n&lt;textarea class=&quot;form-control&quot; rows=&quot;10&quot; cols=&quot;50&quot; id=&quot;CommentsForOnline&quot; name=&quot;CommentsForOnline&quot; type=&quot;text&quot; size=&quot;60&quot; maxlength=&quot;2000&quot;&gt;&lt;/textarea&gt;\n</code></pre>\n<p>It could probably be simplified more, but you get the concept.</p>\n"}, {'answer_id': 74002779, 'author': 'MolyOxide', 'author_id': 13019063, 'author_profile': 'https://Stackoverflow.com/users/13019063', 'pm_score': 0, 'selected': False, 'text': "<p>Simply you can use either:</p>\n<pre><code>$(this).attr(&quot;id&quot;);\n</code></pre>\n<p>Or</p>\n<pre><code>$(event.target).attr(&quot;id&quot;);\n</code></pre>\n<p>But <code>$(this).attr(&quot;id&quot;)</code> will return the ID of the element to which the Event Listener is attached to.<br><br>\nWhereas when we use <code>$(event.target).attr(&quot;id&quot;)</code> this will return the ID of the element that was clicked.<br>\nFor example in a <code>&lt;div&gt;</code> if we have a <code>&lt;p&gt;</code> element then if we click on 'div' <code>$(event.target).attr(&quot;id&quot;)</code> will return the ID of <code>&lt;div&gt;</code>, if we click on 'p' then <code>$(event.target).attr(&quot;id&quot;)</code> will return ID of <code>&lt;p&gt;</code>.\n<br>\nSo use it as per your need.</p>\n"}]
['https://Stackoverflow.com/questions/48239', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1090/']