Getting the ID of the element that fired an event

Question

Is there any way to get the ID of the element that fires an event   I m thinking something like    x000D   x000D    document  ready function     x000D       a   click function     x000D      var test   caller id  x000D      alert test val     x000D        x000D      x000D   lt script type  text javascript  src  starterkit jquery js  gt  lt  script gt  x000D   x000D   lt form class  item  id  aaa  gt  x000D     lt input class  title  gt  lt  input gt  x000D   lt  form gt  x000D   lt form class  item  id  bbb  gt  x000D     lt input class  title  gt  lt  input gt  x000D   lt  form gt  x000D   x000D   x000D    Except of course that the var test should contain the id  aaa   if the event is fired from the first form  and  bbb   if the event is fired from the second form

User · Answer

var buttons   document getElementsByTagName  button    var buttonsLength   buttons length  for  var i   0  i  lt  buttonsLength  i         buttons i  addEventListener  click   clickResponse  false      function clickResponse           do something based on button selection here        alert this id       Working JSFiddle here

User · Answer

For reference  try this  It works   jQuery  classNameofDiv   click function         var contentPanelId   jQuery this  attr  id        alert contentPanelId

User · Answer

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

User · Answer

In case of Angular 7 x you can get the native element and its id or properties   myClickHandler  event        this selectedElement    lt Element gt  event target      console log this selectedElement id      this selectedElement classList remove  some-class        html    lt div class  list-item   click   myClickHandler  event   gt     lt  div gt

User · Answer

this works with most types of elements      selector   on  click  function e       log e currentTarget id

User · Answer

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

User · Answer

In the case of delegated event handlers  where you might have something like this    lt ul gt       lt li data-id  1  gt           lt span gt Item 1 lt  span gt       lt  li gt       lt li data-id  2  gt           lt span gt Item 2 lt  span gt       lt  li gt       lt li data-id  3  gt           lt span gt Item 3 lt  span gt       lt  li gt       lt li data-id  4  gt           lt span gt Item 4 lt  span gt       lt  li gt       lt li data-id  5  gt           lt span gt Item 5 lt  span gt       lt  li gt   lt  ul gt    and your JS code like so     document  ready function            ul   on  click li   function event            var  target     event target               itemId    target data  id               do something with itemId               You ll more than likely find that itemId is undefined  as the content of the LI is wrapped in a  lt span gt   which means the  lt span gt  will probably be the event target  You can get around this with a small check  like so     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               Or  if you prefer to maximize readability  and also avoid unnecessary repetition of jQuery wrapping calls      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               When using event delegation  the  is   method is invaluable for verifying that your event target  among other things  is actually what you need it to be  Use  closest selector  to search up the DOM tree  and use  find selector   generally coupled with  first    as in  find selector  first    to search down it  You don t need to use  first   when using  closest    as it only returns the first matching ancestor element  while  find   returns all matching descendants

User · Answer

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

User · Answer

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

User · Answer

classobj   click function e       console log e currentTarget id

User · Answer

this element attr  id   works fine in IE8

User · Answer

Use can Use  on event       table   on  tr    click   function                         var id   this  attr  id                        alert  ID   id

User · Answer

For all events  not limited to just jQuery you can use  var target   event target    event srcElement  var id   target id   Where event target fails it falls back on event srcElement for IE  To clarify the above code does not require jQuery but also works with jQuery

User · Answer

You can try to use          live  click   function      console log this id    return false

User · Answer

Both of these work   jQuery this  attr  id      and   alert this id

User · Answer

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

User · Answer

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 ID  which is needed for further actions  so  if the DOM is altered you need a different approach      table   delegate  tr    click   function        var id   this  attr  id       alert  ID   id

User · Answer

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   lt script gt        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  quot CommentsForOnAir quot       event target id  quot CommentsForOnline quot                                     Prevent the form from triggering  but allowing multi-line to still work                            else                               event preventDefault                    return false                                                      lt  script gt    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   It could probably be simplified more  but you get the concept

User · Answer

Pure JS is simpler aaa onclick   handler  bbb onclick   handler   function handler        var test   this id     console log test       x000D   x000D  aaa onclick   handler  bbb onclick   handler   function handler        var test   this id     console log test     x000D   lt form class  item  id  aaa  gt     lt input class  title   gt   lt  form gt   lt form class  item  id  bbb  gt     lt input class  title   gt   lt  form gt  x000D   x000D   x000D

User · Answer

Though it is mentioned in other posts  I wanted to spell this out     event target  id is undefined    event target  0  id gives the id attribute   event target id also gives the id attribute   this id gives the id attribute   and    this  id is undefined   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    It tripped me up  so it probably tripped up someone else

User · Answer

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

User · Answer

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

User · Answer

Just use the this reference    this  attr  id     or    this  prop  id

[javascript] Getting the ID of the element that fired an event

Examples related to javascript

Examples related to jquery

Examples related to dom-events