Click event in plain JavaScript

Question

How to know the id of current Html element when clicking on a Html element using plain JavaScript?

<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

I would like to catch "myId" while I am clicking on the body of this div. That means I would like to get the ID of parent div when I click on First Div and Second Div.

My JS code is like below.

document.onclick = function(e) {
   alert(e.target.id)
}

Depends on how you register event handler. Post your JS.

dfsq
– dfsq

2018-01-26 12:20:00 +00:00
Commented Jan 26, 2018 at 12:20 — dfsq
– dfsq, Commented Jan 26, 2018 at 12:20

Mamun · Accepted Answer · 2018-01-30 00:38:18Z

10

You can do that in the following way:

var div = document.getElementById('myId');
div.addEventListener('click', function(e){
  console.log(this.getAttribute('id'))
});

<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

edited Jan 30, 2018 at 0:38

answered Jan 26, 2018 at 12:26

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

abu abu Over a year ago

You solution is working when I click on Parent With id myId. But I would like to click on First Div and Second Div and get the id of parent div. Thanks

Keith Over a year ago

This will attach the event handler on every div, including the div's surrounding the h2's. You can target your selector by doing querySelectorAll('div[id]');

Keith Over a year ago

@abuabu change selector to 'div[id]` as mentioned above, this will then prevent this event getting attached to the div's without the id attribute.

Keith Over a year ago

@Mamun, you have now targeted a single element, div[id] will target any with any id attribute. eg. If you edited the html now to have <div id="myId2"> It won't work for this one.

Mamun Over a year ago

@abuabu, please notice the update in the answer where I have used getElementById instead of querySelector which is most efficient in this case......thanks.

score 4 · Accepted Answer · 2018-01-26 12:37:31Z

4

event.currentTarget will be the dom element that the event is triggered by.

edited Jan 26, 2018 at 12:37

answered Jan 26, 2018 at 12:21

user320487

Comments

eyes_only · Accepted Answer · 2018-01-26 12:51:04Z

1

You can just write a function:

function showid(elem) { 
    var id = elem.id
    console.log(id)
    alert(id)
}

And in your HTML code:

<div id="myId" onclick="showid(this)">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

answered Jan 26, 2018 at 12:51

eyes_only

111 silver badge5 bronze badges

Comments

user1641172 · Accepted Answer · 2018-01-26 12:27:09Z

0

You can do it like this in vanilla JS, register an event handler on the document and retrieve the id of the clicked element:

document.addEventListener("click", function(e){
    alert(e.srcElement.id);
});

<p id="paragraph1">First Paragraph</p>

<button id="myButton">Click Me</button>

answered Jan 26, 2018 at 12:27

user1641172

Collectives™ on Stack Overflow

Click event in plain JavaScript

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related