Getting the Id of the Element That Fired an Event

Getting the ID of the element that fired an event

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

How to get an element's ID from event.target

You can use e.target.id. e.target represents DOM object and you can access all its property and methods.

$('body').on('click', function(e){
    alert(e.target.id);    
});

You can convert the DOM object to jQuery object using jQuery function jQuery(e.target) or $(e.target) to call the jQuery functions on it.

Get the ID of a checkbox that has fired an event

Add this.id inside event listener handler

var checkboxes = document.querySelectorAll('input[type=checkbox]');

// add a change event listener

for (var i = 0; i < checkboxes.length; i++) {

  checkboxes[i].addEventListener('change', function() {

    console.log(this.id);

  });

}

<input type='checkbox' id='1'>

<input type='checkbox' id='2'>

<input type='checkbox' id='3'>

<input type='checkbox' id='4'>

id of element that fired event (this) $(this) unexpected behavior

Inside the click event handler this refers to the dom object, to convert it to jQuery object wrap it with $ like $(this).

And $(this.id) is not correct selector, which search for the tag element hit. Since it's an id of the element it should start with #.

$('#' + this.id)

How to get element whose onClick has been fired on click of any child element

You can use currentTarget for that. It refers to the element on which the event listener was set

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

Documentation

Usage

<a onclick="customerDelete056b0d37(event)" id="ixnat-d26294a3"  data-id="dsddsss3226294a3">
    <i data-js="icons" id="it2ul" class="icons">
        <polyline points="21 8 21 21 3 21 3 8"></polyline>
        <rect x="1" y="3" width="22" height="5"></rect>
        <line x1="10" y1="12" x2="14" y2="12"></line>
    </i>
</a>

And in the javascript

function customerDelete056b0d37(event) {
    /* This will be the a element */
    var a = event.currentTarget;

}

How to get the element that fired the onclick event

See this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="foo" style="background:blue; width:100px; height:100px">
    <script>
      function clicky(e){
        console.log(e); 
      }
      var foo = document.getElementById("foo");
      foo.onclick = function(e){clicky((e || window.event).target);}
    </script>
  </body>
</html>

Getting the class of the element that fired an event using JQuery

Try:

$(document).ready(function() {
    $("a").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});

Extracting the id of an element from Event Listener e.path Array?

Here's a way to locate the ancestor ARTICLE node without using event.path:

function init() {

    var eventTmp = document.querySelectorAll("ul li");
    for (var i = 0; i < eventTmp.length; i++) {
        eventTmp[i].addEventListener('click', function (e) {
          var articleNode = this;
          while (articleNode.nodeName != "ARTICLE" && articleNode.nodeName != "BODY") {
            articleNode = articleNode.parentNode;
          }
          if (articleNode.nodeName == "BODY") {
            // no article ancestor was found
          } else {
            // do something with articleNode
            console.log(articleNode.id);
          }

          e.stopPropagation();
        }, false);
    }
}

Getting the Id of the Element That Fired an Event